Notification

Updated 2 months ago

Live preview

info

positive

caution

critical

Components

4 variants Tokens-backed WCAG 2.2 AAA target

Inline messaging — informational, positive, caution, critical. Toast variant is subsequent-milestone work.

Rendered from components/notification/recipe.json

When to use Notification

Use a notification to surface system feedback after an action or state change. Four variants — informational, positive, caution, critical — communicate severity by colour AND icon AND framing.

Variant	Use for
Info	Neutral context — "Your draft has been saved automatically."
Positive	Successful outcome — "Report exported."
Caution	Reversible problem — "Cannot connect to the network. Reconnecting…"
Critical	Failed action — "Could not save changes. Try again."

Notifications never auto-dismiss without an undo affordance. Time-sensitive critical notifications use role="alert" for assertive announcement.

The substrate ships inline notifications today; toast (positioned) notifications are subsequent-milestone work — most production patterns use inline + a single toast slot at the page level.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.