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.

#103

Variants and duration

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

Variants

Duration

Reference #103 · Pick in the gallery

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.