Toast Svelte Component

Toasts provide brief feedback about an operation through a message on the screen.

Toast Components

There are following components included:

  • Toast

Toast Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-black'
colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'
colors.textIosstring'text-white'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
openedbooleanfalse

Allows to open/close Toast and set its initial state

position'left' | 'right' | 'center''left'

Toast position (only on wide screens). Can be left, center or right

translucentbooleantrue

Makes Toast background translucent (with backdrop-filter: blur) in iOS theme

Toast Slots

NameDescription
button

Toast button content

Examples

Toast.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Toast,
    Block,
  } from 'konsta/svelte';


  let toastLeftOpened = false;
  let toastCenterOpened = false;
  let toastRightOpened = false;


  const openToast = (setter) => {
    // close other toast
    toastLeftOpened = false;
    toastCenterOpened = false;
    toastRightOpened = false;
    setter();
  };
</script>


<Page>
  <Navbar title="Toast" />


  <Block strongIos outlineIos class="space-y-4">
    <Toast position="left" opened={toastLeftOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastLeftOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is left toast!</div>
    </Toast>
    <Toast position="center" opened={toastCenterOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastCenterOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is center toast!</div>
    </Toast>
    <Toast position="right" opened={toastRightOpened}>
      <Button
        slot="button"
        clear
        inline
        onClick={() => (toastRightOpened = false)}
      >
        Close
      </Button>
      <div class="shrink">Hello this is right toast!</div>
    </Toast>
    <p>
      Toasts provide brief feedback about an operation through a message on the
      screen.
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastLeftOpened = true))}>
        Toast on Left
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastCenterOpened = true))}>
        Toast on Center
      </Button>
    </p>
    <p>
      <Button onClick={() => openToast(() => (toastRightOpened = true))}>
        Toast on Right
      </Button>
    </p>
  </Block>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.