Alert

Import

import { Alert } from '@heroui/react';

Usage

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