Building Blocks
Menu
SystemFoundationComponentsPatternsThemesIncluded
CatalogsLive catalogsHow catalogs work
GuidesDocs
Component

Toast

Transient outcome

Required if used
ContractToast
Job
Transient outcome
Requirement
must specify if used
States / rules
What it may / may not say; z-index
Specified means
Semantic colors, not brand green
Hardest context
Success on dark
Example

Tokenized toast

Counter-example

emerald-50 + cheer

Preview

Preview — not a published component API.

Draft savedChanges are up to date.

Usage

Job: Transient outcome.

Semantic colors, not brand green

When not to use

Do not put critical information or required actions only in a transient toast.

Variants

The checklist row does not authorize this page to invent a final component API. Where the source rule names a variant, preserve it; otherwise keep the implemented variant set minimal and job-driven.

States & behavior

What it may / may not say; z-index

Universal interactive baseline

Default, Hover, Focus, Active/Pressed, and Disabled apply to interactive controls. Error, Loading, Empty, and Success apply where the component takes or reports data.

Accessibility

  • Use native semantics whenever they match the job.
  • Keep keyboard focus visible and distinct from hover.
  • Do not rely on color alone for state.
  • Maintain touch-operable targets and no hover-only actions.
  • For composite/overlay controls, document focus movement, Escape, and return focus as applicable.

Responsive behavior

Document sm/md/lg behavior explicitly: whether the component reflows, collapses, changes density, or stays structurally the same. Preserve touch targets and avoid hover-only behavior.

Theme comparison

The component job and interaction contract stay stable while product expression changes.

Base
Draft savedChanges are up to date.
Editorial
Draft savedChanges are up to date.
Native
Draft savedChanges are up to date.

Tokens

Bind the implementation to semantic roles for surface, text, border, focus, spacing, shape, and motion as needed. Actual token names must come from the implemented Foundation; this demo deliberately does not mint package-level token names.

Code / Storybook

No shared Building Blocks implementation is claimed here.

When this component exists in code, this section should link to its source and Storybook stories for executable states, Controls, viewport, accessibility checks, and interaction tests. The documentation page remains responsible for job, guidance, source contract, product decisions, themes, and Catalog lineage.