Toast
When to use it
Section titled “When to use it”From the Lumo.Web.Component.V1.0.Complete library — theUse a toast to confirm that something happened after the user acted — saved, sent, deleted, failed — without interrupting what they are doing.
toast description, read 2026-10-19.Where it goes
Section titled “Where it goes”- overlaid, away from the content the user is working in
When not to use it
Section titled “When not to use it”- Don’t use it for anything the user must act on; that is a Modal or an Alert.
- Use instead:
Modal or an Alert— not implemented in this library yet.
- Use instead:
What each variant is for
Section titled “What each variant is for”| Property | Value | What it is for |
|---|---|---|
status |
positive |
not stated in the source |
status |
negative |
not stated in the source |
status |
warning |
not stated in the source |
status |
info |
not stated in the source |
Accessibility
Section titled “Accessibility”- is role=“status” with aria-live=“polite”, so it is announced when it appears without stealing focus
src/components/toast/toast.jsx:23 - the close control is a real <button> whose accessible name comes from closeLabel
src/components/toast/toastClose.jsx:35 - the status icon is aria-hidden decoration; the title carries the meaning
src/components/toast/toastIcon.jsx:28
Composition
Section titled “Composition”Nothing in the stories shows this component composed with another.
What this version promises
Section titled “What this version promises”See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them.
Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.
Dismissible
Section titled “Dismissible”Long text
Section titled “Long text”Other glyphs
Section titled “Other glyphs”Import
Section titled “Import”import { Toast } from '@ds-house/lumo-design-system';| Prop | Type | Default | Notes |
|---|---|---|---|
status |
`‘positive’ | ‘negative’ | ‘warning’ |
title |
string |
'Report saved' |
Figma Title (151:134). The bold first line. |
description |
boolean |
true |
Figma Description, the boolean. Shows or hides the second line. |
descriptionText |
string |
'Q3 2026 AI value report is ready to share.' |
Figma Description, the text. Renamed per the Empty State precedent — the set spells the boolean and the text with one name. See docs/naming-conflicts.md. |
close |
boolean |
true |
Figma Close. Shows or hides the dismiss control. |
iconName |
string |
'check' |
Figma ↳Icon, as a Material Symbols glyph name rather than a node — the Button precedent in docs/naming-conflicts.md. Defaults to check, which is what the node draws in all four statuses (gap 2). |
onClose |
() => void |
— | Not a Figma property. The close control is drawn but has nothing to do in a static frame; this is what it does. Without it the button still renders and is still focusable, because the node draws it — it simply has no handler, exactly as the design specifies it. |
closeLabel |
string |
'Close' |
Not a Figma property. The accessible name for the close control, whose glyph is aria-hidden decoration. |
className |
string |
'' |
Union types
Section titled “Union types”status:'positive'|'negative'|'warning'|'info'
Tokens it needs
Section titled “Tokens it needs”| Token | Light | Dark |
|---|---|---|
--border-radius-card |
not in the build | — |
--border-radius-full |
not in the build | — |
--border-width-default |
not in the build | — |
--color-bg-base |
not in the build | — |
--color-border-primary-default |
not in the build | — |
--color-icon-disabled |
not in the build | — |
--color-icon-info |
not in the build | — |
--color-icon-negative |
not in the build | — |
--color-icon-positive |
not in the build | — |
--color-icon-warning |
not in the build | — |
--color-text-bold |
not in the build | — |
--color-text-primary |
not in the build | — |
--color-text-secondary |
not in the build | — |
--elevation-focused |
not in the build | — |
--elevation-level2 |
not in the build | — |
--motion-duration-fast |
not in the build | — |
--size-icon-sm |
not in the build | — |
--spacing-gap-horizontal-sm |
not in the build | — |
--spacing-gap-xs |
not in the build | — |
--spacing-padding-md |
not in the build | — |
--typography-fontfamily-body |
not in the build | — |
--typography-fontsize-md |
not in the build | — |
--typography-fontsize-sm |
not in the build | — |
--typography-fontweight-regular |
not in the build | — |
--typography-fontweight-semibold |
not in the build | — |
--typography-lineheight-md |
not in the build | — |
--typography-lineheight-sm |
not in the build | — |
A dash under Dark means the token does not change between themes.
Storybook’s own props table
Section titled “Storybook’s own props table”The Figma node
Section titled “The Figma node”The variant matrix
Section titled “The variant matrix”Each row as the set draws it, in both themes.
Positive
Section titled “Positive”Negative
Section titled “Negative”Warning
Section titled “Warning”All statuses
Section titled “All statuses”Description=false
Section titled “Description=false”Close=false
Section titled “Close=false”Description=false, Close=false
Section titled “Description=false, Close=false”Close control states
Section titled “Close control states”What Figma never bound, and the gaps recorded against it
Section titled “What Figma never bound, and the gaps recorded against it”The build report docs/toast.md records no “Design gaps” section.
Where Figma and this repo disagree across the system, see the disagreements record.
Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.
| Commit | Date | Shipped in | Subject |
|---|---|---|---|
2b94809 |
2026-10-19 | unknown | Write the ten component intent files |
c8bc699 |
2026-10-18 | unknown | Add the test suite, and retire the deliberate stop |
9525e0f |
2026-10-17 | unknown | Make the repo a publishable npm package |
5959849 |
2026-10-15 | unknown | Build Toast from Figma 151:162 — four statuses, six gaps reported |
7ccfbbb53757.