Alert

Usage

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

Anatomy

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

export default () => (
  <Alert>
    <Alert.Indicator />
    <Alert.Content>
      <Alert.Title />
      <Alert.Description />
    </Alert.Content>
  </Alert>
)

Customization

Tailwind CSS

Global CSS

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;
  }
}

Styling Reference

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

Alert.Indicator

Alert.Content

Alert.Title

Alert.Description

Related Components