Alert
Inline message about the current page or task. Tone sets the icon and tint; text stays neutral.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
We’ve just released a new feature
Pixels Audit now checks buttons, icons and fonts in any Figma file.
<div class="px-alert" role="status" data-px-dismissible>
<svg class="px-icon" aria-hidden="true">…</svg>
<div class="px-alert__content">
<p class="px-alert__title">We’ve just released a new feature</p>
<p class="px-alert__desc">Pixels Audit now checks buttons, icons and fonts in any Figma file.</p>
<div class="px-alert__actions"><button type="button" class="px-btn px-btn--link">Dismiss</button><a class="px-link" href="#">View changes<svg class="px-icon" aria-hidden="true">…</svg></a></div>
</div>
<button type="button" class="px-icon-btn px-alert__close" data-px-dismiss aria-label="Close"><svg class="px-icon" aria-hidden="true">…</svg></button>
</div>Usage
- role="status" for info/success; role="alert" for warning/danger.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Tones
Info, Success, Warning, Danger and Neutral.
Changes saved
Your trial ends in 3 days
Payment failed
Update your card to keep your workspace active.
Scheduled maintenance on Sunday
<div class="stack">
<div class="px-alert px-alert--success" role="status"><svg class="px-icon" aria-hidden="true">…</svg><div class="px-alert__content"><p class="px-alert__title">Changes saved</p></div></div>
<div class="px-alert px-alert--warning" role="alert"><svg class="px-icon" aria-hidden="true">…</svg><div class="px-alert__content"><p class="px-alert__title">Your trial ends in 3 days</p></div></div>
<div class="px-alert px-alert--danger" role="alert"><svg class="px-icon" aria-hidden="true">…</svg><div class="px-alert__content"><p class="px-alert__title">Payment failed</p><p class="px-alert__desc">Update your card to keep your workspace active.</p></div></div>
<div class="px-alert px-alert--neutral" role="status"><svg class="px-icon" aria-hidden="true">…</svg><div class="px-alert__content"><p class="px-alert__title">Scheduled maintenance on Sunday</p></div></div>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-alert | class | Info tone by default. |
px-alert--success · --warning · --danger · --neutral | class | Tone. |
__content · __title · __desc · __actions · __close | class | Slots. |
data-px-dismissible + data-px-dismiss | attribute | Close removes the alert. |
Figma properties
Inline message about the current page or task. Tone sets icon and tint; text stays neutral for contrast. Use role=status (info/success) or role=alert (warning/danger). RTL text: Title/Description prop…
| Property | Type | Values |
|---|---|---|
| Title | Text | “We’ve just released a new feature” |
| Description | Text | “Your changes have been saved.” |
| Actions | Boolean | — |
| Close | Boolean | — |
| Tone | Variant | Info Success Warning Danger Neutral |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-alert-radius | radius-16 | 16px |
--px-alert-padding | spacing-16 | 16px |
--px-alert-width | 560px | 560px |
--px-alert-gap | spacing-8 | 8px |
Accessibility
- Do not use role="alert" for messages that were on the page at load.