Alert

React Alert components are used to show important messages or feedback after user actions. They are commonly used to confirm actions, show errors, display warnings, or share system information.

This Alert component is built with React and styled using Tailwind CSS, allowing control over layout, content, and visual style.

Installation

npx @tailgrids/cli add alert

Anatomy

Import the parts and combine them. The AlertIndicator automatically renders an icon that matches the status of the surrounding Alert.

import {
  Alert,
  AlertIndicator,
  AlertContent,
  AlertTitle,
  AlertDescription
} from "@/components/tailgrids/core/alert";

export default () => (
  <Alert status="success">
    <AlertIndicator />
    <AlertContent>
      <AlertTitle>Success</AlertTitle>
      <AlertDescription>
        Your changes have been saved successfully.
      </AlertDescription>
    </AlertContent>
  </Alert>
);

Examples

Basic

Compose different parts to create an alert according to your needs.

Variants

The Alert component includes five semantic variants, each with their own color scheme: default, success, warning, error, and info.

With Actions

Render buttons or links inside <AlertContent> to give users a way to act on the alert.

Custom Icon

Pass any icon as a child of <AlertIndicator> to override the default status icon.

Flexibility

As each part is a separate sub-component, you can customize the layout and content of the alert to suit your needs.

API Reference

Alert

The root container. Provides status context to all child parts.

AlertIndicator

Renders the status-aware icon. Pass children to override the default icon.

AlertContent

The container that groups the title, description and other content.

AlertTitle

The alert heading.

AlertDescription

The alert body.

Accessibility

• Live announcement: The root renders with role="alert", so assistive technologies announce it immediately when it appears in the DOM.
• Heading structure: AlertTitle uses React Aria's Heading component. It defaults to level={4}, and you can pass a different level when you need another heading depth.
• Status is not color-only: Each status is paired with a dedicated AlertIndicator icon, so the message still has a visual cue beyond color alone.
• Indicator is decorative by default: The indicator is intended to be decorative, so it's been hidden from assistive technologies using aria-hidden="true" and role="presentation".
• Content semantics: AlertDescription is a generic content wrapper in the implementation, so you can include plain text, links, lists, or action buttons inside it when needed.
• Testing hooks: Every subcomponent exposes a data-slot attribute, and status-aware parts also expose data-status. These are useful for styling and for accessibility-related tests.