Alert
Contextual feedback messages for typical user actions, available in the eight Bootstrap variants. Alerts render the subtle emphasis palette — a tinted background, matching border, and readable emphasis text.
Import
import { Alert } from '@metatoy/bootstrap-styled';Variants
Use the variant prop for one of the eight contextual colors. Each pulls the color’s
-bg-subtle, -border-subtle, and -text-emphasis tokens (not a solid fill).
Additional content
Alerts can hold headings, paragraphs, and dividers. Add the alert-link class to any
anchor so links match the alert’s emphasis color.
Dismissible
Alert has no built-in dismiss — compose a CloseButton with your own state to remove
it. This keeps the alert a pure presentational element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | — | — |
| as | React.ElementType | — | — |
Alert also accepts all native <div> attributes. role defaults to "alert"; pass a
different role (e.g. "status") when appropriate — see Accessibility.
Theming
Alert reads --bs-alert-color, --bs-alert-bg, --bs-alert-border-color, and
--bs-alert-link-color, which resolve from the chosen variant’s
--bs-<variant>-text-emphasis, --bs-<variant>-bg-subtle, and
--bs-<variant>-border-subtle tokens. Because these are read at runtime, overriding those
color tokens (globally or on a subtree) re-shades the alert. Radius and border come from
--bs-border-radius and --bs-border-width.
Accessibility
Alerts render with role="alert", which asks assistive tech to announce them
immediately — appropriate for content that appears in response to a user action. For a
message present on load or one that shouldn’t interrupt, use role="status" or drop the
role. Don’t rely on color alone; include text (or a visually-hidden label) that conveys
the meaning.
Explore in Ladle
The library doesn’t ship a dedicated Alert story yet — browse the component gallery: Open in Ladle.