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." />

Props

Alert