Notification

Updated 2026-05-14

Confidence anatomy medium variants high motion high a11y high content high

Overview

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., “Item saved”). Automatically dismisses after 3–5 seconds.

Anatomy

1
Container
the bounding surface — typically a status region or live region
2
Status icon
glyph + color reinforcing severity (info, success, warning, error)
3
Title (optional)
short headline summarizing the message
4
Message
the body content explaining what happened and (if applicable) what to do
5
Action (optional)
primary action — retry, undo, dismiss, view details
6
Dismiss control (optional)
explicit close affordance for transient feedback

Variants

Type
`Default`
`Critical`

Motion

Success Toast

Slug: success-toast

transient feedback follows the toast enter/exit timing curve

Skeleton Loading

Slug: skeleton-loading

loader-with-logo + loading-skeleton inherit the skeleton pulse cadence

State Transitions

Slug: state-transitions

severity transitions (e.g. error → success) cross-fade rather than swap