Feedback

Toast

A global notification system. Mount Toaster once, then call toast.success(), toast.error() and friends from anywhere.

Mount Toaster once in the root layout:

<!-- +layout.svelte -->
<script>
  import { Toaster } from "@codeatlasdev/ui";
  let { children } = $props();
</script>

{@render children()}
<Toaster />

Then call toast from anywhere:

<script>
  import { toast } from "@codeatlasdev/ui";
</script>

<button onclick={() => toast.success("Changes saved.")}>Save</button>

toast is a global store, so the calls need no component context. The Toaster is a polite live region (role="region", aria-live="polite") and each toast is a role="status" with a dismiss button. Toasts stack in the bottom right corner, up to 380px wide, in a fixed container layered with --ca-z-snackbar (they are not in the browser top layer, unlike dialogs and popovers). toast.show accepts variant and duration in its options; the shortcut methods take the duration as a second argument. The demo below mounts its own Toaster because every demo is an independent island.

Variants and duration

Five variants, plus persistent (duration 0) and custom durations. The default auto-dismiss is 4 seconds.

Variants

Duration

Code

<script lang="ts">
  import { Button, Toaster, toast } from '@codeatlasdev/ui';
</script>

<Toaster />

<div class="group">
  <p class="label">Variants</p>
  <div class="row">
    <Button variant="outlined" onclick={() => toast.show('This is a default notification.')}>Default</Button>
    <Button variant="outlined" onclick={() => toast.success('Changes saved successfully.')}>Success</Button>
    <Button variant="outlined" onclick={() => toast.error('Something went wrong. Please try again.')}>Error</Button>
    <Button variant="outlined" onclick={() => toast.warning('Your session expires in 5 minutes.')}>Warning</Button>
    <Button variant="outlined" onclick={() => toast.info('A new version is available.')}>Info</Button>
  </div>
</div>

<div class="group">
  <p class="label">Duration</p>
  <div class="row">
    <Button variant="outlined" onclick={() => toast.show('This will not auto-dismiss.', { variant: 'info', duration: 0 })}>
      Persistent (duration 0)
    </Button>
    <Button variant="outlined" onclick={() => toast.success('Gone in 1 second.', 1000)}>1 s</Button>
    <Button variant="outlined" onclick={() => toast.info('Stays for 8 seconds.', 8000)}>8 s</Button>
  </div>
</div>

<style>
  .group { flex-basis: 100%; display: grid; gap: 8px; }
  .label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ca-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .row { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

API

Prop	Type	Default	Description
`toast.show(message, opts?)`	`(message: string, opts?: { variant?: ToastVariant; duration?: number }) => string`	–	Shows a toast and returns its id. Variant defaults to 'default'.
`toast.success(message, duration?)`	`(message: string, duration?: number) => string`	–	Success toast.
`toast.error(message, duration?)`	`(message: string, duration?: number) => string`	–	Error toast.
`toast.warning(message, duration?)`	`(message: string, duration?: number) => string`	–	Warning toast.
`toast.info(message, duration?)`	`(message: string, duration?: number) => string`	–	Info toast.
`toast.remove(id)`	`(id: string) => void`	–	Dismisses a toast by id.
`toast.items`	`ToastItem[]`	–	Reactive list of the visible toasts.
`duration`	`number`	`4000`	Auto-dismiss delay in ms. 0 keeps the toast until dismissed.
`ToastVariant`	`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`	–	Accepted variants.