Alert
Short message set apart from the surrounding text. Pure presentation — it
renders a <div> and holds no state.
Scheduled maintenance
New in this release
Deploy finished
Approaching your limit
Payment failed
Props
| Prop | Values | Default | Description |
|---|---|---|---|
variant | "default", "accent", "success", "warning", "danger" | "default" | Visual weight of the message. |
title | node | — | Bold first line. Omit it for a single-paragraph alert. |
className | string | "" | Appended after the component's own classes. |
All other <div> attributes are forwarded, including ref.
Common patterns
<Alert title="Scheduled maintenance">
Read-only on Sunday, 02:00–04:00 UTC.
</Alert>
// No title, just a line of text
<Alert variant="accent">Your trial ends in 5 days.</Alert>Notes
success and warning read the optional --color-success and
--color-warning tokens rather than the core seven. They ship in the theme
block, but if you delete either line those variants render with an empty
background — Tailwind never generates a utility for a token that doesn't
exist, and it fails silently. Keep the token or don't use the variant.
The danger variant sets role="alert", so screen readers announce it when
it appears. The others do not, since a message that is simply present on the
page should not interrupt.