atom

Alert

Contextual feedback message for user actions or system status with optional icon, title, and close button.

Overview

The Alert component provides inline contextual feedback messages. Use it for form validation errors, success confirmations, warnings, and informational messages. Alerts support an optional title, body content, custom icon, and a dismiss button via the onClose prop.

Props

Prop Type Default Description
variant 'danger' | 'success' | 'warning' | 'info' 'info' Visual style and semantic meaning
title ReactNode - Optional title displayed above the body
children ReactNode - Body content of the alert
icon ReactNode - Custom icon override displayed before the content
onClose () => void - Close handler — renders a dismiss button when provided
className string - Additional CSS class names

Variants

Danger

Use for error messages and critical issues that need immediate attention. 

<Alert variant="danger" title="Error">
  Failed to save changes. Please try again.
</Alert>

Success

Use for positive confirmations and completed actions.

<Alert variant="success" title="Saved">
  Your changes have been saved successfully.
</Alert>

Warning

Use for cautionary messages that don't block the user.

<Alert variant="warning" title="Warning">
  Your session will expire in 5 minutes.
</Alert>

Info

Use for informational messages and helpful tips.

<Alert variant="info" title="Tip">
  You can customize your dashboard in settings.
</Alert>

Without Title

Alerts can be used without a title for simpler messages.

<Alert variant="info">
  This is a simple informational message without a title.
</Alert>

Examples

Form Validation

Display validation errors above or below a form.

Dismissible Alert

Provide an onClose handler to render a dismiss button.

const [visible, setVisible] = useState(true);

{visible && (
  <Alert variant="info" title="Tip" onClose={() => setVisible(false)}>
    You can customize your dashboard in settings.
  </Alert>
)}

Custom Icon

Override the default icon with a custom one using the icon prop. 

import { ShieldAlert } from 'lucide-react';

<Alert variant="warning" title="Security Notice" icon={<ShieldAlert size={20} />}>
  Please enable two-factor authentication.
</Alert>

Accessibility

  • Role: Uses role="alert" which announces content automatically to screen readers via a live region.
  • Keyboard Support: Close button is focusable with Tab and activates with Enter or Space.
  • Close Button: Includes aria-label="Dismiss" for screen reader users.
  • WCAG Compliance: Meets AA standards for color contrast and semantic structure.

Best Practices

  • Use semantic variants that match the message type (danger for errors, success for confirmations)
  • Keep alert messages concise and actionable
  • Don't use alerts for transient notifications — use a toast system instead
  • Avoid stacking too many alerts — consolidate related messages
  • Provide a clear title when the body text alone may be ambiguous