Skip to content
CodeAtlas UI

Feedback

Toast

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

<!-- +layout.svelte: mount once -->
<script>
  import { Toaster } from "@codeatlasdev/ui";
</script>
<Toaster />

<!-- 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". Toasts stack in the bottom right corner. 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
svelte 
<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

PropTypeDefaultDescription
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.itemsToastItem[]–Reactive list of the visible toasts.
durationnumber4000Auto-dismiss delay in ms. 0 keeps the toast until dismissed.
ToastVariant'default' | 'success' | 'error' | 'warning' | 'info'–Accepted variants.