Studio
2

Toast

Installation

pnpm dlx @mielui/svelte add toast

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Mount Toaster once in your app layout, then fire notifications with toast. Descriptions appear in the upper inset; the footer contains the title and action buttons.

Changing duration restarts the dismissal countdown, while paused toasts remain paused. Persistent toasts have no dismissal timer. Promise results do not reopen a toast that was dismissed. Dismissal removes a toast from the active stack immediately; its local exit transition controls visual removal. Reduced motion skips that transition, and changing Toaster hosts does not replay exiting notifications.

import { toast } from '$lib/mielui/components/toast';

toast.success('Profile updated', {
  description: 'Your changes have been saved.'
});
toast.error('Request failed', {
  description: 'Could not connect.'
});

Composition

Toast.Root accepts a toast object and optional children. Without children, it renders Content, Footer, Icon, Title, Actions, and Close. Compose these same parts to omit, reorder, or restyle a region. This example omits actions and the close button.

Content and Title display the toast description and title unless you supply children. Actions renders the configured actions or your own Toast.Action parts. Each Action takes an object with label, callback, and optional variant. Clicking it runs the callback and dismisses the toast.

Close sits at the top-right, with space reserved beside the content. Action and Close render buttons; all parts accept native attributes and class.

Use persistent: true for decisions that should wait for the user. Timed notifications pause while hovered or focused. Toast.Root alone does not register a timer or portal; Toaster handles those for notifications created with toast().

Examples

Action buttons

Promise

Pass a promise and loading, success, and error messages to toast.promise. One notification updates as the request settles. Success and error messages can be functions of the result or error. The helper returns the toast handle; await the original promise when subsequent work depends on it.

All types

Glass surface

Set surface="glass" on Toast.Root or pass surface: "glass" to toast(). Solid remains the default. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

Notch notifications

Mount one Toaster with variant="notch" to deliver notifications from the center of a screen edge. Choose top, bottom, left, or right with side. Calls to toast and toast.promise keep the same timers, actions, and dismissal behavior. Multiple notifications share the expanding surface. Pass surface: "glass" to toast to use a glass surface; otherwise the notch follows your global surface setting.

The newest notification appears first. When several are active, previous and next actions unfold from arcs beside the notch on hover or focus. Switching items does not restart their timers.

Hover or focus pauses the selected item. Hidden items keep their original lifetimes. Escape or a swipe toward the attached edge dismisses only the selected notification.

Replace your existing Toaster rather than adding a second host. The first mounted host owns notifications. For custom live activity content, compose theNotch component directly.

Try each notification in place

Each example has its own viewport and Toaster. Notifications stay inside that preview, including promise updates and edge notches. In your app, mount one Toaster in the root layout and call toast from the components that own each action.

API reference

Toast.Root

Owns one notification and pauses its timer during interaction.

Prop Type Default
toast Required Toast —
surface "solid" | "glass" | undefined toast.surface

Toast.Action

Runs one action and dismisses the toast.

Prop Type Default
action Required ToastAction —

Toast.Actions

Groups action buttons.

Toast.Close

Dismisses the notification.

Toast.Content

Renders the upper inset content.

Toast.Footer

Groups the title and controls below the inset.

Toast.Icon

Renders the status icon.

Toast.Title

Renders the notification title.

Toaster

Renders the notification region.

Prop Type Default
variant "default" | "notch" | undefined 'default'
side "left" | "right" | "top" | "bottom" | undefined 'top'