Feedback
Telling the user what happened, or what is happening.
Alert
An inline message in one of the four status registers. Use it to flag success, warning, error, or info in place.
i
A note for later
Typography and spacing foundations are documented above.
✓
Saved
Your component was added to the library.
!
Double-check contrast
Light swatches need dark text to stay legible.
!
Could not save
Something went wrong. Please try again.
Tooltip
A small label shown on hover or focus. Use it to explain an element without adding clutter.
Built from tokens
Modal
A dialog that overlays the page behind a backdrop. Use it to focus attention on one task or decision.
Notifications panel
A list of recent activity with read and unread states. Use it to surface updates in one place.
Notifications
Nikola Tesla commented on the color tokens.
2 minutes ago
Albert Einstein approved your button changes.
1 hour ago
Isaac Newton shared the type scale.
Yesterday
Progress bar
A bar that fills toward completion. Use it to show determinate progress of a known task.
Spinner
An indeterminate loading indicator. Use it while waiting on work of unknown length.