Alert

Alerts display important messages to users. They support different semantic states, sizes, optional action buttons, dismissibility, and custom icons.

Alert Playground

Installation

npm install class-variance-authority @phosphor-icons/react @react-aria/button @react-aria/focus @react-aria/interactions

Basic Usage

A simple alert with a message:

import { Alert } from '@versaui/ui/components/Alert';

function Example() {
  return (
    <Alert>This is an important message.</Alert>
  );
}

State Variants

Each state conveys a different level of urgency with matching colors and icons:

// Informational (default)
<Alert state="default">System maintenance scheduled for tonight.</Alert>

// Feature highlight
<Alert state="highlight">New feature available! Check it out.</Alert>

// Success confirmation
<Alert state="success">Your changes have been saved successfully.</Alert>

// Warning
<Alert state="warning">Please review your settings before continuing.</Alert>

// Error
<Alert state="error">An error occurred. Please try again.</Alert>

Default

General informational messages without specific semantic meaning. Uses a neutral color scheme with an info icon.

Highlight

Promotional or attention-grabbing messages for new features and updates. Uses the secondary brand color with a sparkle icon.

Success

Confirms successful actions or completed operations. Uses green tones with a check circle icon.

Warning

Cautions users about potential issues or important considerations. Uses amber tones with a warning icon.

Error

Indicates problems requiring user attention or action. Uses red tones with an error circle icon.

Size Variants

Two sizes are available — default and small:

<Alert size="default">Default size with standard padding.</Alert>

<Alert size="small">Compact size for tighter layouts.</Alert>

Actions

Pass an action element (typically a Button or LinkButton) for inline calls-to-action. The component automatically enforces design-consistent button styling:

import { Alert } from '@versaui/ui/components/Alert';
import { Button } from '@versaui/ui/components/Button';

<Alert
  state="highlight"
  action={<Button>Learn More</Button>}
>
  A new version is available with exciting features.
</Alert>

Dismissible

Alerts are dismissible by default. Set dismissible={false} to remove the close button:

// Dismissible (default) — has a close button
<Alert onDismiss={() => console.log('dismissed')}>
  You can dismiss this alert.
</Alert>

// Non-dismissible — no close button
<Alert dismissible={false}>
  This alert cannot be dismissed.
</Alert>

Custom Icons

Override the default state icon with a custom Phosphor icon. The component enforces state-consistent sizing, weight, and color on any icon you provide:

import { LightningIcon } from '@phosphor-icons/react';

<Alert
  state="highlight"
  icon={<LightningIcon />}
>
  Powered by Versa UI.
</Alert>

To hide the icon entirely:

<Alert showIcon={false}>
  An alert without any icon.
</Alert>

Accessibility

• ARIA role: Uses appropriate ARIA roles for screen reader announcement
• Dismiss button: Includes accessible label for screen readers
• Color contrast: All states meet WCAG AA contrast requirements
• Focus management: Dismiss button receives keyboard focus

Alert Props