i

Toast notification

Interrupting and annotating · researched

A transient message that appears at the edge of the screen, then disappears on its own.

molecule · also called Snackbar, Toast

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Message native: no antd 6.6.5
Variants
—
Sizes
—
States documented
error, loading
Accessibility guidance
no

Message is the brief global feedback toast; Notification (separate page, corner placement) is the richer sibling. Layers are divs with role=alert by default (rc-notification).

docs ↗ · code ↗

Carbon

Toast notification subset native: no @carbon/react 1.117.0
Variants
Informational, Success, Warning, Error
Sizes
—
States documented
—
Accessibility guidance
yes

One Notification page covers Inline, Toast, Actionable and Callout; ToastNotification is the toast variant (div, role=status, optional timeout prop). Variants listed are the status kinds, not component variants.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/notification/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/notification/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No toast or transient message. Notification banner is persistent and in the page.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Snackbar is listed under unbuilt components in the roadmap; nothing in the repo.

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No toast/snackbar component in the component index, Internal Components list (BannerStack stacks Banners but is internal-only), or src/ tree. Notification messaging exists only as a UI pattern page.

Spectrum

Toast native: no @spectrum-web-components/button 1.12.4
Variants
neutral, informative, positive, negative
Sizes
—
States documented
default, focus
Accessibility guidance
yes

Variants, states and accessibility from the React Spectrum (rsp) page text (S2 source calls the blue one info). Native check: S2 Toast uses React Aria divs with role alert/alertdialog and SWC 1st-gen sp-toast is a div role=alert; no spectrum.adobe.com swc page.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No toast or transient message. Alert and Site alert are persistent in-page messages. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementpopover attribute (popover=manual); optionally inside an output elementNo toast element or APG pattern exists (0 'toast' hits in the HTML Living Standard). Two primary sources cover the behaviour: (1) HTML spec Popover section: 'A popover can be useful for rendering a status message, confirming the action performed by the user', example popover=manual inside output, plus the warning that inserting a popover into an output 'will generally cause screen readers to announce the content when it becomes visible'; (2) MDN Popover API overview: typical use cases include 'custom "toast" notifications'. MDN output page: implicit ARIA role status. Spec output element: 'the result of a calculation performed by the application, or the result of a user action'. APG Alert: role alert, dynamically rendered alerts are announced by most screen readers, and 'it is crucial they do not affect keyboard focus'; also avoid alerts that disappear automatically (WCAG 2.2.3).
Baseline—
APG patternalert
ARIA rolestatus
Shipped by3 of 7 systems

Anatomy

  1. message — APG Alert: 'a brief, important message'. A toast is not an APG pattern; the alert pattern is the nearest.
  2. dismiss control optional — Not in APG alert. APG warns against alerts that disappear automatically (WCAG 2.2.3).

The seven states

default Visible message.
hover Pointer-only CSS state; not defined by APG or HTML.
focus n/a — APG alert: must not take keyboard focus.
active n/a — Not defined.
disabled n/a — Not defined.
error n/a — A toast reports an outcome; error is a content variant, not a state defined by sources.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.