Messages
Alert
Shows a message inside the page that people should read, such as a result, a warning or a notice.
Import
import { Alert, AlertTitle, AlertDescription } from "@booleanpress/ui/alert"Usage
An alert is a box in the flow of the page. Put an icon first, then AlertTitle and AlertDescription. Each part is optional; with no icon the text starts at the edge.
import { InfoIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@booleanpress/ui/alert"
export function LoggingNotice() {
return (
<Alert variant="info">
<InfoIcon />
<AlertTitle>Logging is on</AlertTitle>
<AlertDescription>Every email is kept for 30 days, then deleted.</AlertDescription>
</Alert>
)
}variant sets the tone: default for a neutral note, success, info and warning on the status tokens, destructive for an error. Do not rely on colour alone: the title or the icon says what kind of message it is.
An alert has no close button and no action slot. For either, put a Button in the description (an action) or beside the alert (a dismissal), as the examples show. For a message that appears for a few seconds after an action, use a toast instead.
Examples
Basic
An icon, a title and a description.
Tones
success, info, warning and destructive, each with the icon that names its tone.
Without an icon
With no icon the text uses the full width.
With an action
A small button inside the description answers the message.
Dismissible
The page adds a ghost icon button, named with aria-label, and keeps the open state.
Accessibility
- Semantics
- A
divwithrole="alert", which is an assertive live region: a screen reader reads it as soon as it appears in the page. - Labels
- The alert's own text is read. Write the title so it makes sense alone, and keep the icon decorative (lucide icons are hidden from assistive technology by default).
- Focus
- An alert takes no focus and is not in the tab order. A button or link inside it is.
- Known limits
- Every alert is
role="alert", so several alerts rendered together on page load are all announced at once. Show only what needs attention, and use a plaindivwith the same classes for a quiet note. - An alert that is present when the page loads is not announced by every screen reader; one added later is. Do not rely on it for the only copy of important text.
AlertTitlekeeps one line (line-clamp-1) and cuts longer titles with an ellipsis, so keep titles short.
- Every alert is
Keyboard
| Key | Behaviour |
|---|
API
Alert
Renders a div and passes it every other prop.
AlertTitle
Renders a div and passes it every other prop.
AlertDescription
Renders a div and passes it every other prop.
Every part takes className, merged with its defaults by cn(), and ref, which reaches the element it renders.
Data attributes: data-slot="alert" (Alert), data-slot="alert-title" (AlertTitle), data-slot="alert-description" (AlertDescription).
Theming
The status variants read --success, --warning and --info: a 30–40 % border and a 5–10 % fill of the token on the card colour, with the icon in the token colour and the text in --foreground. destructive colours the text and icon with --destructive.
The tokens its classes read. Change their values in your theme, and it follows.
| Token | Used for |
|---|---|
--card | background |
--card-foreground | text |
--destructive | text |
--foreground | text |
--info | border, background, text |
--muted-foreground | text |
--success | border, background, text |
--warning | border, background, text |