Build · New

Alert

A message in the page, next to what it's about, that stays until the situation changes or the person dismisses it: a failed payment, an expiring ID, a finished import.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/alert

Dependencies it brings: @phosphor-icons/react

Usage

import { Alert } from "@/components/ui/alert";

<Alert type="warning" title="Your ID expires on 12 October" action={{ label: "Upload ID", href: "/id" }}>
  Upload a new ID before then to keep sending money.
</Alert>

Examples

Types and emphasis

Type says what the message is; emphasis says how loud: Light for most alerts, Subtle for ones people should notice, Intense for the one critical problem on a page.

Dismissible

dismissible for alerts that only inform. On dismiss, focus moves on to the next control. Remembering the dismissal is up to the app (onDismiss).

Form error summary

After a failed submit an Error alert appears above the form (announce="alert"), focus moves to it, and its links go to the fields. Submit the form empty to see it.

API reference

Alert

Prop	Type	Default	Description
`type`	`"information" \| "success" \| "warning" \| "error"`	`"information"`	Figma's Type.
`emphasis`	`"light" \| "subtle" \| "intense"`	`"light"`	Figma's Emphasis.
`title`	`ReactNode`		Figma's Title: what happened.
`children`	`ReactNode`		Figma's Message: what to do about it.
`icon`	`IconComponent \| null`		Figma's Show leading icon; one per type by default.
`action / link`	`{ label; href?; render?; onClick? }`		Figma's Show Button and Show link.
`announce`	`"status" \| "alert"`		For alerts that appear after something happens; `alert` for urgent errors only.
`dismissible / dismissLabel / onDismiss`	`boolean / string / () => void`		Figma's Show dismiss, the button's name, and what dismissing does.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	To the action, the link and the dismiss button; after dismissing, focus moves to the next control.

ARIA

An alert that's there when the page loads is part of it; one that appears after something happens takes status, an urgent error alert.
Color never works alone: the icon and the title say the type.
The dismiss button has a name (Dismiss).

Arabic and RTL notes

Mirrors

The icon, title and message sit on the right, the dismiss button on the left, and the actions start on the right.

Does not mirror

The information, success, warning and error icons don't mirror.

Numerals: Dates, amounts and IDs read left to right inside <bdi dir="ltr">.
Arabic typography: Title body-14 Semibold, message body-14; the height is a minimum.
Mixed-direction text: Write the Arabic title and message natively, not word for word.

All components ›