Toast

<div class="relative h-56">
  <Toast>My Toast</Toast>
</div>

<script lang="ts">
  import { Toast, Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex h-[140px] flex-col items-center">
  <Toast align={false}>
    <span class="font-semibold text-gray-900 dark:text-white">New notification</span>
    <div class="mt-3 flex items-center">
      <Avatar src="/images/profile-picture-3.webp" alt="Bonnie Green" />
      <div class="ms-3">
        <h4 class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</h4>
        <div class="text-sm font-normal">commented on your photo</div>
        <span class="text-xs font-medium text-primary-600 dark:text-primary-500">a few seconds ago</span>
      </div>
    </div>
  </Toast>
</div>

<script lang="ts">
  import { Avatar, Button, Toast } from 'svelte-5-ui-lib';
</script>

<div class="flex h-[180px] flex-col items-center">
  <Toast align={false} iconClass="w-10 h-10 rounded-full">
    {#snippet icon()}
      <Avatar src="/images/profile-picture-1.webp" alt="Jese Leos" />
    {/snippet}
    <div class="ms-3 text-sm font-normal">
      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
      <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
      <Button size="xs">Reply</Button>
    </div>
  </Toast>
</div>

<script lang="ts">
  import { Button, Toast } from 'svelte-5-ui-lib';
  let toastUndoStatus: boolean = $state(true);
  const changeUndoStatus = () => {
    toastUndoStatus = !toastUndoStatus;
  };
</script>

<div class="flex flex-col items-center">
  <div class="mb-4 h-16">
    <Toast bind:toastStatus={toastUndoStatus} iconClass="w-full text-sm font-normal flex items-center justify-between">
      Conversation archived.
      <a class="ms-auto rounded-lg p-1.5 font-medium text-primary-600 hover:bg-primary-100 dark:text-primary-500 dark:hover:bg-gray-700" href="/">Undo</a>
    </Toast>
  </div>
  <Button class="w-36" disabled={toastUndoStatus ? true : false} onclick={changeUndoStatus}>Open toast</Button>
</div>