Alert

Basic

Pair .alert with a tone modifier. Use .alert--neutral for the plain surface look, or an intent like .alert--primary, .alert--success, .alert--warning, .alert--danger, .alert--info for a tinted variant. A bare .alert renders transparent (the same contract as .button), so the tone gives the alert its visible chrome.

Without icon

There's no icon wrapper class. The leading icon is any direct <svg> or <i> child. Skip it and the row reflows around the text.

With heading and description

Add .alert__description for a stacked layout. The heading sits above the description, the icon aligns with the heading, and the row gains breathing room.

Same layout, with an intent.

Action slot

.alert__action is the trailing slot. It pushes to the right on single-line alerts and centers vertically when a description is present. Drop in a button, link, or any control.

Multiple actions and intent variants.

Dismissible

Alert ships no special close control. Drop a .button--ghost.button--neutral.button--icon-only.button--sm with an X icon inside .alert__action and wire your own dismiss handler.

Inline link

.alert__link reads --alert-link-color. That resolves to primary on a neutral alert and to the intent color on tinted alerts, so the link affordance stays readable regardless of tone.

Customization

These variables retune .alert without touching component CSS. Override on .alert itself, on a parent scope, or on :root. The cascade scopes the change.

A bare .alert stays transparent because --alert-bg and --alert-border-color default to transparent. The tone modifier provides the visible chrome, so an alert without a tone is invisible by design.