Alert

Loading component...

Installation

Usage

Basic Example

import { Alert, AlertDescription, AlertTitle } from "@/components/redpanda-ui/alert"
import { Terminal } from "lucide-react"

<Alert>
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Default Alert

import { Info } from "lucide-react"

<Alert variant="default">
  <Info />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    This is a general information alert. Use it to provide helpful context or neutral updates.
  </AlertDescription>
</Alert>

Destructive Alert

import { AlertTriangle } from "lucide-react"

<Alert variant="destructive">
  <AlertTriangle />
  <AlertTitle>Error occurred</AlertTitle>
  <AlertDescription>
    Your session has expired. Please sign in again to continue.
  </AlertDescription>
</Alert>

Without Icon

<Alert>
  <AlertTitle>No Icon Alert</AlertTitle>
  <AlertDescription>
    This alert doesn't include an icon. The layout automatically adjusts when no icon is present.
  </AlertDescription>
</Alert>

Simple Description Only

import { CheckCircle } from "lucide-react"

<Alert>
  <CheckCircle />
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>

When to use

Use alerts to communicate important messages that require user attention. Choose the right variant based on the message urgency and type:

Use Alert when:

Displaying system-wide messages or status updates
Showing form-level validation feedback
Communicating important context about the current page or action
Providing persistent information that users should be aware of
Displaying error states that don't require immediate action

Don't use Alert when:

The message is temporary (use Toast instead)
You need user confirmation (use Alert Dialog instead)
The message is field-specific (use field-level validation)
The information is purely decorative (use a regular text block)

Anatomy

The Alert component has a simple, flexible structure:

Alert Container (role="alert")
┌─────────────────────────────────────────────────┐
│ [Icon]  AlertTitle (optional)                   │
│         AlertDescription (optional)             │
└─────────────────────────────────────────────────┘

Layout Grid Structure:
┌─────────────┬───────────────────────────────────┐
│             │                                   │
│   [Icon]    │  AlertTitle                       │
│   (16px)    │  AlertDescription                 │
│             │                                   │
└─────────────┴───────────────────────────────────┘
 Grid Column 1   Grid Column 2

Component Hierarchy:

Alert (Container): Main wrapper with variant styling and grid layout
Icon (Optional): Visual indicator placed in the first grid column
AlertTitle (Optional): Bold heading text in the second grid column
AlertDescription (Optional): Descriptive text below the title

CSS Grid Layout:

With Icon: grid-cols-[calc(var(--spacing)*4)_1fr] - Fixed icon column + flexible content
Without Icon: grid-cols-[0_1fr] - No icon space + full-width content
Gap: 12px horizontal gap between icon and text content

Variants:

default: Standard card background with neutral text colors
destructive: Error styling with red text and maintained background

Examples

Default

Open in