Alert

Variants

Alert provides semantic variants for different message types. Each variant uses distinct color tokens that adapt across themes.

Heads up

This is a default informational alert.

Error

Your session has expired. Please log in again.

Success

Your changes have been saved.

Warning

This action cannot be undone.

Description Only

AlertTitle is optional. Use AlertDescription alone for simpler inline messages.

You can customize your notification preferences in settings.

Use AlertActions to add a right-aligned, gap-aware row of action buttons — ideal for inline error placards with retry or dismiss controls. The slot sits below the description and right-aligns its children with consistent spacing.

Could not load data

The request timed out. Check your connection and try again.

Soft Appearance

appearance="soft" is the inline alert for forms and dialogs: a refusal under a control, or the consequence of an action inside a dialog. It draws a soft tinted fill with no edge and no shadow, a 32px outline icon in the tone's colour, and the body in secondary ink. The icon and the fill carry the tone, so a refusal reads calm. Set an optional bold lead with AlertLead at the start of the description.

`variant`	Fill	Icon	Default `role`
`destructive`	`--surface-error-soft`	`WarningOctagon`, 32px	`alert`
`warning`	`--surface-warning-soft`	`Warning`, 32px	`status`
`success`	`--surface-success-soft`	`CheckCircle`, 32px	`status`
`default`	a faint wash of the ink colour	`Info`, 24px	`status`

Danger is an octagon, so it differs from a warning by shape as well as colour. info has no soft surface yet and draws as default. An explicit role prop still wins.

That email isn't on the list. Ask your host for an invite, or try another address.

Unsaved changes. Leave now and they are lost.

Check your inbox for a sign-in code.

Only the venue owner can change payout details.

With an action row

AlertActions sits under the text. The content is at least the icon's height and centred against it: one line sits level with the icon, and a longer message starts at its top.

This can't be undone. The two profiles merge into one, and their bookings, payouts and notes move with it.

Alert appearance="soft" — a refusal or notice directly under a control (a sign-in code refused, an email not invited), or a consequence inside a dialog.
FieldError — one input's own validation hint, wired to that input through aria-describedby.
ErrorPlacard — a section or panel failed to load and offers a retry.
Banner — a full-width notice at the top of a page.

Tuning

The soft sizes are component tokens, so a product tunes them in its theme without forking the component: --alert-icon-size (32px), --alert-icon-size-note (24px), --alert-soft-padding (12px 14px), --alert-gap (12px), --alert-radius (--radius-lg), --alert-font-size (--font-size-sm) and --alert-lead-font-weight (--font-weight-bold). Bind them under components.alert in a theme. See Component Tokens.

Installation

npx visor add alert

This copies two files into your project:

components/ui/alert/alert.tsx — the component
components/ui/alert/alert.module.css — the styles

Usage

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert/alert';

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

API Reference

AlertProps

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'success' \| 'warning' \| 'info'`	`'default'`	Semantic tone. Under appearance="soft", info draws as default.
`appearance`	`'default' \| 'soft'`	`'default'`	soft draws a tinted fill with no edge or shadow, a tone icon and the body in secondary ink.
`icon`	`React.ReactElement<IconProps>`	—	soft only. Replaces the tone's default icon; drawn at --alert-icon-size (24px for the default note) and hidden from assistive tech.
`role`	`string`	`'alert'`	Defaults to alert. Under appearance="soft", defaults to alert for destructive and status for the rest.

The component also accepts all standard <div> HTML attributes.

Sub-components

AlertTitle — Bold heading text for the alert message. Accepts all <div> attributes.
AlertDescription — Secondary descriptive text below the title. Accepts all <div> attributes.
AlertLead — A bold lead sentence in primary ink, set inline at the start of AlertDescription. Renders a <strong>.
AlertActions — Right-aligned, gap-aware row for inline action buttons (e.g. retry/dismiss). Accepts all <div> attributes.

Accessibility

Renders with role="alert", which announces the content to screen readers immediately.
Under appearance="soft", only destructive keeps role="alert"; the other tones use role="status", which waits for a pause. Pass role to override.
The soft icon is decorative (aria-hidden). Tone is never carried by colour alone: each tone has its own icon shape, and the lead names the problem in words.
Use AlertTitle to provide a concise summary that screen readers announce first.
For non-urgent messages, consider using Banner with role="status" instead.