Alert
An inline message with an icon, title, body and actions. Neutral by default. Status variants use a light fill with dark text.
Status
Use the default for general information. Use
data-variant when the message has a status. Use
role="alert" only for errors that must be announced
right away.
Order #1042 is awaiting payment confirmation.
New carrier rates apply from today.
$79.00 captured. Ready to fulfil.
3 variants are below their reorder point.
The card was declined. Ask the customer to use another method.
<div class="stack" data-gap="sm">
<div class="alert" role="status">
<i class="icon icon-terminal" aria-hidden="true"></i>
<strong>Order received</strong>
<p>Order #1042 is awaiting payment confirmation.</p>
</div>
<div class="alert" data-variant="info" role="status">
<i class="icon icon-info" aria-hidden="true"></i>
<strong>Shipping rates updated</strong>
<p>New carrier rates apply from today.</p>
</div>
<div class="alert" data-variant="ok" role="status">
<i class="icon icon-circle-check" aria-hidden="true"></i>
<strong>Payment captured</strong>
<p>$79.00 captured. Ready to fulfil.</p>
</div>
<div class="alert" data-variant="warning" role="status">
<i class="icon icon-triangle-alert" aria-hidden="true"></i>
<strong>Low stock</strong>
<p>3 variants are below their reorder point.</p>
</div>
<div class="alert" data-variant="danger" role="alert">
<i class="icon icon-circle-alert" aria-hidden="true"></i>
<strong>Payment failed</strong>
<p>The card was declined. Ask the customer to use another method.</p>
</div>
</div>With actions
Put buttons in a <footer> below the body. Use
small buttons.
Renew to keep fulfilment automations running.
<div class="alert" data-variant="warning" role="status">
<i class="icon icon-triangle-alert" aria-hidden="true"></i>
<strong>Subscription ends in 3 days</strong>
<p>Renew to keep fulfilment automations running.</p>
<footer>
<button type="button" class="btn" data-size="sm">Renew</button>
<button type="button" class="btn" data-variant="ghost" data-size="sm">Remind me later</button>
</footer>
</div>Title only
For short messages that need no extra detail.
<div class="alert" data-variant="ok" role="status">
<i class="icon icon-circle-check" aria-hidden="true"></i>
<strong>Changes saved</strong>
</div>Without icon
Without an icon, the text takes the full width.
The Admin API is read-only on Sunday 02:00-04:00.
<div class="alert" data-variant="info" role="note">
<strong>Scheduled maintenance</strong>
<p>The Admin API is read-only on Sunday 02:00-04:00.</p>
</div>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.alert |
Alert box. A two-column grid with the icon on the left and all other children in the right column. | |
data-variant |
ok, warning, info,
danger (omit for neutral)
|
Light fill and text colour for the status. The default has a surface fill and a 1px border. |
> .icon |
Optional. The first icon. Without it, the text takes the full width. | |
> strong, > h2, h3, h4 |
Title, 14px bold. | |
> p, > section |
Body text. | |
> footer |
Button row, 8px below the body. | |
role |
status, alert, note
|
status for general notices,
alert for errors that must be announced at
once, note for static text on the page.
|