Alert

Alerts are used to show important messages to users.

Usage

Use the .Alert class with a variant class. Include an .Alert-Icon (SVG), .Alert-Body, and optionally .Alert-Close.

<div class="Alert success" role="status">
  <svg class="Alert-Icon" aria-hidden="true">…</svg>
  <div class="Alert-Body">
    <strong class="Alert-Title">Saved</strong>
    <p class="Alert-Message">Your changes were saved successfully.</p>
  </div>
  <button class="Alert-Close" aria-label="Dismiss">×</button>
</div>

Variants

• success: Positive outcomes.
• warning: Cautionary messages.
• danger: Errors or destructive outcomes.
• info: Informational messages.

Example

Accessibility

Use role="status" for success and info alerts (polite, non-interrupting). Use role="alert" for danger and warning alerts (assertive, interrupts screen reader flow immediately).

Dismissing

Add an .Alert-Close button and apply data-dismissing to the .Alert element to trigger the collapse animation before removing it from the DOM.

<!-- 1. User clicks close → add data-dismissing to start animation -->
<div class="Alert success" data-dismissing>…</div>

<!-- 2. On animationend → remove the element entirely -->

Structure

• .Alert-Icon: SVG icon, colored by variant.
• .Alert-Body: Wraps .Alert-Title and .Alert-Message.
• .Alert-Title: Bold heading for the alert.
• .Alert-Message: Supporting message text.
• .Alert-Close: Dismiss button, placed after .Alert-Body.