✍️ Alert-banner

Updated 2026-05-14

Confidence anatomy medium variants high motion high a11y high content high

Overview

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn’t disappear automatically.

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

	`Horizontal`	`Vertical`
`Primary`
`Success`
`Warning`
`Danger`

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