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.

Svelte

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

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

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

Usage

Preview

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

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Button, toast } from "@fefade-ui/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>

  <Button
    onclick={() => {
      toast({
        message: `
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, et in praesentium ab eveniet dolor harum.
        Voluptate nobis magni modi provident? Molestiae laboriosam beatae in.
        Ratione, iure. Officiis, autem aspernatur.
        `,
        duration: 150000,
        position: "bottom-center"
      })
    }}
  >
    Large message
  </Button>
</div>

Props

Prop	Type	Default	Description
message	string	—	The text content to display inside the toast.
color	string	"primary"	The color variant of the toast (e.g., success, error, warning, info).
duration	number	5000	Duration in milliseconds before the toast automatically closes.
position	"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center"	"top-right"	Position on the screen where the toast appears.
isClosable	boolean	false	Whether the toast shows a close button.
withProgressLoader	boolean	false	Whether a progress bar is displayed indicating remaining duration.