Alert
Display important messages and notifications to users with status indicators
Import
import { Alert } from '@heroui/react';Usage
New features available
Check out our latest updates including dark mode support and improved accessibility features.Update available
A new version of the application is available. Please refresh to get the latest features and bug fixes.Unable to connect to server
We're experiencing connection issues. Please try the following:- Check your internet connection
- Refresh the page
- Clear your browser cache
Profile updated successfully
Processing your request
Please wait while we sync your data. This may take a few moments.Scheduled maintenance
Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for scheduled maintenance.import {Alert, Button, CloseButton, Spinner} from "@heroui/react";
import React from "react";
export function Basic() {
return (Anatomy
Import the Alert component and access all parts using dot notation.
import { Alert } from '@heroui/react';
export default () => (
<Alert>
<Alert.Indicator />
<Alert.Content>
<Alert.Title />
<Alert.Description />
</Alert.Content>
</Alert>
)Styling
Passing Tailwind CSS classes
import { Alert } from "@heroui/react";
function CustomAlert() {
return (
<Alert className="border-2 border-blue-500 rounded-xl" status="accent">
<Alert.Indicator className="text-blue-600" />
<Alert.Content className="gap-1">
<Alert.Title className="font-bold text-lg">Custom Alert</Alert.Title>
<Alert.Description className="text-sm opacity-80">
This alert has custom styling applied
</Alert.Description>
</Alert.Content>
</Alert>
);
}Customizing the component classes
To customize the Alert component classes, you can use the @layer components directive.
Learn more.
@layer components {
.alert {
@apply rounded-2xl shadow-lg;
}
.alert__title {
@apply font-bold text-lg;
}
.alert--danger {
@apply border-l-4 border-red-600;
}
}HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Alert component uses these CSS classes (View source styles):
Base Classes
.alert- Base alert container.alert__indicator- Icon/indicator container.alert__content- Content wrapper for title and description.alert__title- Alert title text.alert__description- Alert description text
Status Variant Classes
.alert--default- Default gray status.alert--accent- Accent blue status.alert--success- Success green status.alert--warning- Warning yellow/orange status.alert--danger- Danger red status
Interactive States
The Alert component is primarily informational and doesn't have interactive states on the base component. However, it can contain interactive elements like buttons or close buttons.
API Reference
Alert Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | "default" | "accent" | "success" | "warning" | "danger" | "default" | The visual status of the alert |
className | string | - | Additional CSS classes |
children | ReactNode | - | The alert content |
Alert.Indicator Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | Custom indicator icon (defaults to status icon) |
Alert.Content Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | Content (typically Title and Description) |
Alert.Title Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | The alert title text |
Alert.Description Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
children | ReactNode | - | The alert description text |
