Alert

Alert with sizes and variants

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.

Default: General information.
Success: Positive outcomes or confirmations.
Warning: Cautionary information that needs attention.
Danger: Critical errors or destructive actions.

Usage

Import the component:

import { Alert, AlertTitle, AlertDescription } from "@eqtylab/equality";

Basic usage with title and description:

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>This is an important message.</AlertDescription>
</Alert>

Variants

Default

This is a default alert for general information.

Success

Your changes have been saved successfully.

Warning

Please review your input before continuing.

Danger

A serious error occurred.

Usage

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Please review your input before continuing.</AlertDescription>
</Alert>

<Alert variant="danger">
  <AlertTitle>Danger</AlertTitle>
  <AlertDescription>A serious error occurred.</AlertDescription>
</Alert>

Slots

Name	Description
`AlertTitle`	Renders the alert heading as an `<h5>` element.
`AlertDescription`	Renders the alert body content as a `<div>` element.

Props

Alert

Name	Description	Type	Default	Required
`variant`	The visual style of the alert	`default`, `success`, `warning`, `danger`	`default`	❌

AlertTitle

Accepts all standard HTML heading attributes.

AlertDescription

Accepts all standard HTML paragraph attributes.