Setup

Make sure to include the Toaster component inside the provider to enable toast notifications.

For installation and setup instructions, see the Getting Started guide.

Recommended: Place this in src/routes/+layout.svelte (SvelteKit root layout)

<script lang="ts">
  import { Provider, Toaster } from "@fefade/svelte"
</script>

<Provider>
  <Toaster />
  {@render children()}
</Provider>

Usage

Preview

successwarningerrorinfo top-leftbottom-lefttop-rightbottom-rightbottom-centertop-center Duration: 50000 Closable With Progress Loader

Code

<script lang="ts">
  import { Constants } from "@fefade/core"
  import { Button, toast } from "@fefade/svelte"

  const positions = [
    "top-left",
    "bottom-left",
    "top-right",
    "bottom-right",
    "bottom-center",
    "top-center"
  ] as const
</script>

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
  {#each Constants.statusColors as color (color)}
    <Button
      onclick={() => {
        toast({
          message: color,
          color
        })
      }}
      class={`bg-${color} text-on-${color}`}
    >
      {color}
    </Button>
  {/each}

  {#each positions as position (position)}
    <Button
      onclick={() => {
        toast({
          message: position,
          position
        })
      }}
    >
      {position}
    </Button>
  {/each}

  <Button
    onclick={() => {
      toast({
        message: "Duration: 50000",
        duration: 50000
      })
    }}
  >
    Duration: 50000
  </Button>

  <Button
    onclick={() => {
      toast({
        message: "closable",
        isClosable: true
      })
    }}
  >
    Closable
  </Button>

  <Button
    onclick={() => {
      toast({
        message: "with progress loader",
        withProgressLoader: true,
        duration: 15000
      })
    }}
  >
    With Progress Loader
  </Button>
</div>