Alert

A message container with optional icon, title, description, and action. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• alert, alert-title, alert-description

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="alert">
  <div role="status">
    <p class="alert-title">Deployment complete</p>
    <p class="alert-description">All checks passed.</p>
  </div>
  <button class="btn" type="button">View log</button>
</div>

Variants and composition

The base class handles spacing and alignment. Add the product’s border, background, and text utilities; alert-title and alert-description mark the message hierarchy.

Behavior and accessibility

Keep an action outside any live status region so its control is not re-announced with the message. Status icons are decorative; the consumer supplies colors and any live-region semantics.

Reference

See the interactive Storybook specimen ↗. Continue to Avatar or return to the Official preset overview.