• Type to search the docs
Markdown:
Components

Toast

A transient notification region driven imperatively by a Toaster.

Usage

Use standalone, driven by a Toaster from createToaster().

Svelte
<Toast {toaster} {...props}>
  {#snippet children(item)}{item.message}{/snippet}
</Toast>

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<div class="whole" popover="manual">
  {#each toaster.toasts as item (item.id)}
    <div class="middle" animate:flip={{ duration: motion }}>
      <div class="main" role aria-label>
        {children(item, variant)}
      </div>
    </div>
  {/each}
</div>

Props

NameTypeDefaultDescription
toaster*Toaster-A Toaster from createToaster() used to drive the component imperatively
children*Snippet-Renders each ToastItem
motionnumber200Flip animation duration
stylingSVSClass-Styling override
variantSVSVariantNEUTRALVariant

* required.

assertive: true on createToaster() or Toaster.add() switches toast items from polite to assertive announcement.

Styling

To learn more, see Styling.

Variant Management

While a toast is visible, the component variant is applied; while it animates out, inactive is applied.

Default Class Name

svs-toast

Accessibility

Keyboard Interactions

KeyDescription
F6When the toast region is open and the key event is not composed, moves focus to the toast region

ARIA Roles and Attributes

The component applies these automatically:

  • Toast region (whole): role="region", tabindex="-1", and aria-label with the current notification count.
  • Toast item (main): role="status" by default for polite announcement, or role="alert" when assertive is true, plus tabindex="0" and aria-label derived from the toast type ("<type> message") or "message".

No separate label prop is required for the generated region or toast item names. Provide meaningful rendered toast content through children, because the generated item label describes the message category, not the full message body.

Exports

Types

TypeScript
interface ToasterOptions {
  duration?: number;
  assertive?: boolean;
}
interface ToastAddOptions {
  type?: string;
  duration?: number;
  assertive?: boolean;
}
interface ToastItem {
  readonly id: string;
  readonly message: string;
  readonly type: string;
  readonly assertive: boolean;
  readonly visible: boolean;
}
interface ToastProps {
  toaster: Toaster;
  children: Snippet<[ToastItem, string]>; // Snippet<[item,variant]>
  motion?: number; // (200) flip animation duration
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
}
type ToastReqdProps = "toaster" | "children";
type ToastBindProps = never;

Others

TypeScript
// Creates an isolated toast store to pass to <Toast> and drive imperatively.
function createToaster(options?: ToasterOptions): Toaster;

class Toaster {
  readonly toasts: ToastItem[]; // reactive list of current toasts
  add(message: string, options?: ToastAddOptions): string; // enqueue a toast; options include type/duration/assertive; returns its id
  dismiss(id: string): void; // start the hide animation (auto-removes afterward)
  remove(id: string): void; // remove immediately without animation
  clear(): void; // dismiss all toasts
  pause(id: string): void; // pause the auto-dismiss timer (e.g. on hover)
  resume(id: string, extend?: boolean): void; // restart the auto-dismiss timer; extend lengthens the duration
}

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Toast Types