Alert

Inline notification messages

FeedbackStable

Preview

Interactive preview of the Alert component with different variants.

Information

This is an informational alert message.

Success

Your changes have been saved successfully.

Warning

Please review your changes before proceeding.

Error

An error occurred while processing your request.

Installation

Install the package via npm:

bash

npm install apex-design-system

Import

tsx

import { Alert, AlertTitle, AlertDescription } from 'apex-design-system';

Basic Usage

tsx

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

Variants

The component supports multiple visual variants:

tsx

<Alert variant="info">Info alert</Alert>
<Alert variant="success">Success alert</Alert>
<Alert variant="warning">Warning alert</Alert>
<Alert variant="error">Error alert</Alert>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in Storybook View source