Toast

Info:Feedback

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

notification

snackbar

flash

transient message

alert

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.

Your export is ready to download.

Theme saved — all 310 tokens covered.

Connection unstable. Retrying in the background.

Failed to publish. Check your network.

Deployed to production.

Project moved to trash.

closable={false} drops the dismiss button, for a notice that leaves on its own. A pushed toast takes the same option.

Copied to clipboard.

Autosaved a moment ago.

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

warn

danger

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 xtyle-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 xtyle-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 xtyle-toast-region near the document root and push toasts from anywhere via its toast(opts) method.

A pushed toast is an xtyle-toast: the region builds the element and the same fill draws the card, so a restyle or an override lands on both paths at once.

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.

Prop	Type	Default	Bindings	Description
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 html: message on toast()	string	—	html	The toast text. Required by the imperative `toast(opts)` API; the slot carries it declaratively.
duration html: duration on toast()	number	5000	html	Auto-dismiss delay in milliseconds; `0` keeps the toast until dismissed. Pauses on hover/focus. (Imperative API.)
actionLabel html: action-label	string	—	html svelte astro	Label for an optional inline action button.
closable	boolean	true	html svelte astro	Whether to render the close button. On by default; pass `false` (`closable="false"` in raw HTML) to drop it, and pair that with a `duration` so the toast can still leave.
closeLabel html: close-label	string	Dismiss	html svelte astro	Accessible label for the close button.
placement html: placement on xtyle-toast-region	string	bottom-right	html	Region anchor: bottom-right, top, top-left, bottom-left, top-center, or bottom-center.
max html: max on xtyle-toast-region	number	5	html	Maximum visible toasts; the oldest is dismissed when the cap is exceeded. (Region.)

Events

What the component emits, and what rides along on event.detail. The name in the first column is the one addEventListener takes.

Event	Detail	Bindings	Description
action	{ value }	html svelte astro	The toast's action button was pressed.
dismiss	{ reason }	html svelte astro	The toast was dismissed, by the close button or by its own timeout.

Methods

What you can call on the element itself — the half of the surface a prop or an event cannot express. A control driven by a gesture, or one whose state the platform owns, opens here. Astro renders on the server and hands back no instance, so no method is reachable from it.

Method	Returns	Bindings	Description
toast(opts: { message: string; tone?: string; duration?: number })	HTMLElement	html	Raise a toast and hand back the element it created, so a caller can dismiss it early or watch it. The imperative surface is the point: a toast has no markup a consumer authors ahead of time.

Appearance

Variants

soft

.xtyle-toast--soft

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

solid

.xtyle-toast--solid

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

States

enter

.xtyle-toast--enter

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

leave

.xtyle-toast--leave

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

action-hover

.xtyle-toast__action:hover::after

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

focus-visible

.xtyle-toast__action:focus-visible, .xtyle-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. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.

toast-region

internal

.xtyle-toast-region

The fixed, non-focus-stealing live-region container that stacks and announces toasts.

--space-3

--space-5

--space-6

--layer-toast

toast

Success:::part(toast)

.xtyle-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

Success:::part(icon)

.xtyle-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 xtyle-toast / Toast).

--text-lg

message

Success:::part(message)

.xtyle-toast__message

The notification text; the content that gets announced.

--weight-medium

action

Success:::part(action)

.xtyle-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

Success:::part(close)

.xtyle-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: 310 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { 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

--fg-0

--font-sans

--gray

--gray-fg

--green

--green-fg

--info

--info-fg

--layer-toast

--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 xtyle-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).

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.

<xtyle-toast-region id="toasts" placement="bottom-right"></xtyle-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,
	});

	region.toast({
		severity: "success",
		message: "Copied to clipboard.",
		closable: false,
		duration: 2000,
	});
</script>

<script lang="ts">
	import { Toast } from "@xtyle/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 "@xtyle/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>

Toast

Try it live

Soft, the four tones

Solid variant

Without a close button

Every tone

When to use

Props

Events

Methods

Appearance

Variants

States

Anatomy

Tokens & coverage

Slots

Code

Tones, variants, and the imperative region

Related

Toast

Live demo

Try it live

Soft, the four tones

Solid variant

Without a close button

Every tone

When to use

Props

Events

Methods

Appearance

Variants

States

Anatomy

Tokens & coverage

Slots

Accessibility

Code

Tones, variants, and the imperative region

Related