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.

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

No props data available for “alert”.

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.
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.
Use AlertTitle to provide a concise summary that screen readers announce first.
For non-urgent messages, consider using Banner with role="status" instead.