Alert

Overview

The Alert component displays important messages to users, usually as a result of an action they took. Use alerts to communicate status, warnings, errors, or success states.

• Primary: General information.
• Neutral: Lower-emphasis, information.
• Success: Positive outcomes or confirmations.
• Warning: Cautionary information that needs attention.
• Danger: Critical errors or destructive actions.

Usage

Import the component:

import { Alert } from "@eqtylab/equality";

Basic usage with title and description:

<Alert title="Heads up!" description="This is an important message." />

Variants

Usage

<Alert variant="primary" title="Primary" description="This is a general notification for your information." />
<Alert variant="neutral" title="Neutral" description="This is a low-emphasis, informational message." />
<Alert variant="success" title="Success" description="Your changes have been saved successfully." />
<Alert variant="warning" title="Warning" description="Please review your input before continuing." />
<Alert variant="danger" title="Danger" description="A serious error occurred." />

Icons

The success, warning, and danger variants apply a default icon automatically. The primary and neutral variants have no icon by default. Override it with the icon prop by passing a Lucide icon name or a React element. Pass icon={null} to remove a variant’s default icon, or add an icon to a variant that has none.

<Alert variant="primary" icon="Info" title="Custom icon" description="A primary alert with an explicitly provided icon." />
<Alert variant="success" icon="PartyPopper" title="Overridden icon" description="A success alert with a custom icon instead of the default." />
<Alert variant="danger" icon={null} title="No icon" description="A danger alert with its default icon removed." />

Longer bodies and standing callouts

description renders in a <p>, so it suits a sentence. For a body with paragraphs, lists or code, use children instead — it renders in a <div>, where block content is valid:

<Alert variant="warning" title="Heads up">
  <p>This body has real block content.</p>
  <ul>
    <li>Including a list</li>
  </ul>
</Alert>

By default Alert renders a <div role="alert">. That is an assertive live region: screen readers announce it immediately, which is right for a message that appears in response to something the user did, and wrong for content that is simply part of the page. For a standing callout, render an aside instead — this drops the live region:

<Alert as="aside" variant="neutral" title="Note">
  <p>Standing page content, not announced on load.</p>
</Alert>

Props

Alert