Alert Component

A component that displays a brief, important message in a way that attracts the user's attention.

Various predefined variants for different situations
Support for custom icons
Ability to include action buttons
Accessible with appropriate ARIA roles

Installation

The Alert component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the alert in your project.

React TSX
1import {
2  Alert,
3  AlertTitle,
4  AlertDescription,
5} from "@/components/modern-ui/alert"

React TSX
1<Alert>
2  <AlertTitle>Heads up!</AlertTitle>
3  <AlertDescription>
4    You can add components to your app using the cli.
5  </AlertDescription>
6</Alert>

Examples

Default Alert

Heads up!

You can add components to your app using the CLI.

Success Alert

Success!

Your changes have been saved successfully.

Destructive Alert

Error

Your session has expired. Please log in again to continue.

Info Alert

Note

This page is still under construction. Some features may not work as expected.

Alert with Actions

Unsaved Changes

You have unsaved changes. Do you want to save or discard them?

API Reference

Alert

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'info'`	`'default'`	The variant of the alert
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The content of the alert

AlertTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The title of the alert

AlertDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	The description of the alert