Loading…

Alert

A callout that draws attention to an important message.

Feedback
1 file
1 npm package
Accessibility notes

Playground

Heads up

Your trial ends in 3 days.

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add alert

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Variants
Without Icon
Title Only
Live Region

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Alert>

Prop	Type	Default
`live`	`AlertLive`	`"off"`
`variant`	`"default" \| "destructive" \| "success" \| "warning" \| "info"`	`"default"`

Plus every attribute of <div>.

<AlertTitle>

Plus every attribute of <div>.

<AlertDescription>

Plus every attribute of <div>.

Accessibility

Not a live region by default. Pass live="polite" for alerts that appear in response to a user action, or live="assertive" for errors that must interrupt. Variant colour is never the only signal — the title carries the meaning.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.