Skip to main content
xoji

Toast
Info:Feedback html svelte astro Success: coverage 73/73

A transient notification that announces itself and slips away — color and meaning on independent axes, in a live-region stack.

Live demo

live · @xoji/astro

Toast

Try it live

Push real toasts into a live-region stack. They auto-dismiss, announce politely (or assertively for danger and warn), and stack from the bottom-right.

Soft, the four tones
Your export is ready to download.
Theme saved — all 276 tokens covered.

Solid variant
Deployed to production.

Every tone

Toast takes the full tone vocabulary. The four status tones carry a severity icon; every other tone is purely cosmetic.

Accents
accent
accent-2
accent-3
accent-4
neutral

Statuses
success
info

Named hues
red
orange
yellow
green
blue
purple
brown
pink
cyan
gray
white
black

Toast surfaces brief, transient feedback without stealing focus. Two axes drive it independently.

severity (success, warn, danger, info) carries the meaning: the status glyph and the live-region politeness, so danger/warn announce assertively. tone carries the color, from the full palette. A severity paints its standard color by default (danger reads red), but a tone overrides it, and a color-only toast (a non-status tone, no severity) shows no glyph and announces politely. A xoji-toast-region is a fixed live-region container with an imperative toast(opts) method that pushes cards; each carries one of two variants: soft, an overlay card with a colored edge, or solid, a fully filled card. Toasts enter and leave with a tokened transition, auto-dismiss after a configurable delay that pauses while the pointer or focus rests on them, and may carry a single action button and a close button. A standalone xoji-toast element is also exposed for declarative, statically-placed notices.

When to use

How this component composes with the rest of the set.

Mount one xoji-toast-region near the document root and push toasts from anywhere via its toast(opts) method.
Use the action slot/actionLabel to pair a toast with a single Button-like recovery action (Retry, Undo); keep it to one.
For persistent, in-flow status that should not auto-dismiss, reach for Alert instead; Toast is for the transient.

Props

10 props, straight from the manifest.

PropTypeDefaultBindingsDescription
tone ToastTone
accent neutral danger success warn info accent-2 accent-3 accent-4 red orange yellow green blue purple brown pink cyan gray white black
—
html svelte astro
The card color — any semantic role, accent variant, or named hue. Defaults to the `severity` color (info when neither is set); set it to recolor a severity or to tint a color-only notice.
severity ToastSeverity
success warn danger info
—
html svelte astro
The meaning, independent of color: drives the status glyph and the live-region politeness (`danger`/`warn` announce assertively). Omit for a color-only toast with no glyph. A bare status-named `tone` implies the matching severity.
variant ToastVariant
soft solid
soft
html svelte astro
Visual treatment: a tone-edged overlay card or a fully tone-filled one.
message string —
html
The toast text. Required by the imperative `toast(opts)` API; the slot carries it declaratively.
duration number 5000
html
Auto-dismiss delay in milliseconds; `0` keeps the toast until dismissed. Pauses on hover/focus. (Imperative API.)
actionLabel string —
html svelte astro
Label for an optional inline action button.
closable boolean true
html svelte astro
Whether to render the close button.
closeLabel string Dismiss
html svelte astro
Accessible label for the close button.
placement string bottom-right
html
Region anchor: bottom-right, top, top-left, bottom-left, top-center, or bottom-center.
max number 5
html
Maximum visible toasts; the oldest is dismissed when the cap is exceeded. (Region.)

Appearance

Variants

soft

 .xoji-toast--soft

An overlay surface card with a tone-colored border and tone-colored icon.

solid

 .xoji-toast--solid

Filled with the tone color, with on-fill ink and icon.

States

enter

 .xoji-toast--enter

Mount transition: the toast fades and slides into place over --duration-base.

leave

 .xoji-toast--leave

Dismiss transition: the toast fades and slides out before removal.

action-hover

 .xoji-toast__action:hover::after

Pointer over the action button: overlay paints the hover tint.

focus-visible

 .xoji-toast__action:focus-visible, .xoji-toast__close:focus-visible

Keyboard focus on the action or close button: a token ring plus a transparent outline promoted in forced-colors mode.

Anatomy

The named parts that make up the component, with their selectors.

toast-region

 .xoji-toast-region

The fixed, non-focus-stealing live-region container that stacks and announces toasts.
--space-3 --space-5 --space-6 --elevation-5

toast

 .xoji-toast

A single notification card carrying the variant and tone classes.
--font-sans --text-body --leading-normal --surface-overlay --surface-overlay-border --fg-0 --border-thin --radius-md --shadow --space-3 --space-4 --duration-base --ease-emphasized

icon

 .xoji-toast__icon

The severity glyph, shown when a severity is set, drawn in the card color (soft) or the on-fill ink (solid). Project an icon slot to override it (declarative xoji-toast / Toast).
--text-lg

message

 .xoji-toast__message

The notification text; the content that gets announced.
--weight-medium

action

 .xoji-toast__action

An optional inline action button that runs a callback then dismisses the toast.
--text-sm --weight-semibold --leading-tight --border-thin --radius-sm --space-1 --space-3 --state-hover --state-press

close

 .xoji-toast__close

The dismiss button in the top corner.
--text-lg --radius-sm --space-0 --space-1 --state-hover --state-press

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 73/73 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent --accent-2 --accent-2-fg --accent-3 --accent-3-fg --accent-4 --accent-4-fg --accent-fg --black --black-fg --blue --blue-fg --border-normal --border-thick --border-thin --brown --brown-fg --cyan --cyan-fg --danger --danger-fg --duration-base --duration-fast --ease-emphasized --ease-standard --elevation-5 --fg-0 --font-sans --gray --gray-fg --green --green-fg --info --info-fg --leading-normal --leading-tight --neutral --neutral-fg --orange --orange-fg --pink --pink-fg --purple --purple-fg --radius-md --radius-sm --red --red-fg --ring --shadow --space-0 --space-1 --space-3 --space-4 --space-5 --space-6 --state-hover --state-press --success --success-fg --surface-overlay --surface-overlay-border --text-body --text-lg --text-sm --warn --warn-fg --weight-medium --weight-semibold --white --white-fg --yellow --yellow-fg

Slots
default
html svelte astro

The toast message (declarative xoji-toast / Toast).
icon
html svelte astro

Overrides the built-in severity glyph on a declarative toast; fill it to show your own icon (not available through the imperative toast(opts) API).

Accessibility
The region is an aria-live container that never receives focus, so toasts never interrupt the user's place.
Politeness follows severity, not color: danger/warn get role="alert" (assertive); other severities and color-only toasts get role="status" (polite).
Each toast is aria-atomic so the whole message is announced as a unit.
Auto-dismiss pauses while the pointer hovers or focus rests inside a toast, so action and close controls stay reachable.
The tone icon is decorative (aria-hidden); the close button carries an aria-label.
Focus on the action and close buttons shows a token ring plus a transparent outline the forced-colors base rule promotes to a real system outline.

Code

Tones, variants, and the imperative region

Push toasts from a region, or place a standalone toast declaratively. The four status tones span both variants.

 
<xoji-toast-region id="toasts" placement="bottom-right"></xoji-toast-region>

<script type="module">
	const region = document.getElementById("toasts");

	region.toast({ message: "Settings saved." });

	region.toast({
		tone: "success",
		variant: "solid",
		message: "Your profile is live.",
	});

	region.toast({
		tone: "danger",
		message: "Upload failed.",
		actionLabel: "Retry",
		onAction: () => retryUpload(),
	});

	region.toast({
		tone: "info",
		message: "Sync paused while offline.",
		duration: 0,
	});
</script>
 
<script lang="ts">
	import { Toast } from "@xoji/svelte";
</script>

<Toast tone="success" variant="soft">Settings saved.</Toast>

<Toast tone="danger" actionLabel="Retry" onaction={() => retryUpload()}>
	Upload failed.
</Toast>

<Toast tone="info" closable={false}>Sync paused while offline.</Toast>
 
---
import { Toast } from "@xoji/astro";
---

<Toast tone="success" variant="soft">Settings saved.</Toast>

<Toast tone="danger" actionLabel="Retry">Upload failed.</Toast>

<Toast tone="info" closable={false}>Sync paused while offline.</Toast>