Examples
Basic usage
Heads up
Your profile has unsaved changes. Save before leaving this page.
<div class="alert media" role="alert">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<div class="media-body">
<h4>Heads up</h4>
<p>Your profile has unsaved changes. Save before leaving this page.</p>
</div>
</div>
Alert Headers
Heads up
Your profile has unsaved changes. Save before leaving this page.
<div
class="alert media"
role="alert"
style="
--alert-header-font-size: var(--font-size-base);
--alert-header-font-weight: var(--font-weight-black);
"
>
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<div class="media-body">
<h4>Heads up</h4>
<p>Your profile has unsaved changes. Save before leaving this page.</p>
</div>
</div>
Color
Scheduled maintenance
The API will be read-only between 02:00 and 03:00 UTC on Sunday.
Changes saved
Your settings were applied a moment ago.
Approaching quota
You've used 90% of your monthly request allowance.
Payment failed
We couldn't charge the card on file. Update your billing details to keep your subscription active.
<div class="stack is-snug">
<div class="alert media is-info">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<div class="media-body">
<h4>Scheduled maintenance</h4>
<p>The API will be read-only between 02:00 and 03:00 UTC on Sunday.</p>
</div>
</div>
<div class="alert media is-success">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M20 6 9 17l-5-5" />
</svg>
<div class="media-body">
<h4>Changes saved</h4>
<p>Your settings were applied a moment ago.</p>
</div>
</div>
<div class="alert media is-warning">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"
/>
<path d="M12 9v4" />
<path d="M12 17h.01" />
</svg>
<div class="media-body">
<h4>Approaching quota</h4>
<p>You've used 90% of your monthly request allowance.</p>
</div>
</div>
<div class="alert media is-danger">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m15 9-6 6" />
<path d="m9 9 6 6" />
</svg>
<div class="media-body">
<h4>Payment failed</h4>
<p>
We couldn't charge the card on file. Update your billing details to keep
your subscription active.
</p>
</div>
</div>
</div>
Density
Draft autosaved
Changes are kept locally until you publish.
<div class="alert media is-compact is-warning">
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path
d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"
/>
<path d="M12 9v4" />
<path d="M12 17h.01" />
</svg>
<div class="media-body">
<h4>Draft autosaved</h4>
<p>Changes are kept locally until you publish.</p>
</div>
</div>
Without a figure
New keyboard shortcuts
Press ? anywhere in the app to see the full shortcut list.
A message alert only
<div class="alert media is-info" role="alert">
<div class="media-body">
<h4>New keyboard shortcuts</h4>
<p>Press ? anywhere in the app to see the full shortcut list.</p>
</div>
</div>
<div class="alert media is-info" role="alert">
<div class="media-body">
<p>A message alert only</p>
</div>
</div>
Dismissible
Tip
You can drag columns to reorder them. This message won't come back after you close it.
<div class="alert media is-info" role="alert" data-dismissible>
<svg
class="media-figure icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<div class="media-body">
<h4>Tip</h4>
<p>
You can drag columns to reorder them. This message won't come back after you
close it.
</p>
</div>
<button class="dismiss" type="button" aria-label="Close">×</button>
</div>
Source comments
Alert -- inline persistent message (themed veneer, P3)
Alert themes; .media lays out. Alert has no slot classes of its
own. Pair with .media on the same root:
<div class="alert media is-warning" role="alert">
<svg class="media-figure">…</svg>
<div class="media-body">
<h4>Heads up</h4>
<p>Something happened.</p>
</div>
</div>
Dismissible (uses .dismiss + dismiss.js):
<div class="alert media is-warning" role="alert" data-dismissible>
<svg class="media-figure">…</svg>
<div class="media-body">…</div>
<button class="dismiss" type="button" aria-label="Close">×</button>
</div>
Reference
Source: src/css/alert.css
Applies to
.alert
Classes
| Class | Kind | Description |
|---|---|---|
.is-info | variant | Info color variant for primary-tone alerts |
.is-success | variant | Success color variant |
.is-warning | variant | Warning color variant |
.is-danger | variant | Danger color variant |
.is-compact | variant | Tighter padding and gap for dense layouts |
Slots
| Slot | Description |
|---|---|
.media-figure | Icon slot, colored by the active accent |
Tokens
| Token | Default | Description |
|---|---|---|
--alert-bg | var(--color-surface-raised) | The background color for the alert |
--alert-header-font-size | var(--font-size-base) | The font-size for the alert header |
--alert-header-font-weight | var(--font-weight-bold) | Font weight for the alert header |
--alert-color | var(--color-text) | Text color for the alert body and header |
--alert-border-color | var(--color-border) | Border color for the alert container |
--alert-border-width | var(--border-width-default) | Border width for the alert container |
--alert-accent | var(--color-border-strong) | Accent color used for the icon and left-border emphasis |
--alert-padding-block | var(--ui-pad-block-snug) | Block-axis padding inside the alert |
--alert-padding-inline | var(--ui-pad-inline-snug) | Inline-axis padding inside the alert |
--media-gap | var(--ui-gutter-snug) | Gap between the icon figure and body content |