Alert

Powered by

Shadcn UI

Installation

Usage

Basic Example

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

<Alert variant="info">
  <Info />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Info Alert

import { Info } from "lucide-react"

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

Success Alert

import { CheckCircle2 } from "lucide-react"

<Alert variant="success">
  <CheckCircle2 />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>

Warning Alert

import { AlertTriangle } from "lucide-react"

<Alert variant="warning">
  <AlertTriangle />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    Your trial period expires in 3 days. Upgrade your plan to continue using all features.
  </AlertDescription>
</Alert>

Destructive Alert

import { AlertCircle } from "lucide-react"

<Alert variant="destructive">
  <AlertCircle />
  <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. Alerts and warnings are often placed directly on the page to provide immediate feedback and build trust with users.

Placement Guidelines

Generic errors: Place at the top of the page when the error affects the entire page or system.

Field-specific errors: Place as close to the relevant field or component as possible for immediate context.

Alert vs Toast vs Modal

Choose the right notification pattern based on the message characteristics:

Use Alert when:

• Displaying longer-lived feedback or information (e.g., recommendations, resource errors)
• The notification is not blocking and should persist on the page
• Showing system-wide messages or status updates in resource overviews, modals, or forms
• Communicating important context about the current page or action
• The error/information is blocking page display (e.g., 404 errors)

Use Toast when:

• The notification is transient and appears after an action
• The message can be resolved by reloading or is temporary
• You don't need added emphasis, extensive content, or multiple actions
• Providing brief confirmations or status updates

Use Modal when:

• The notification is transient but requires added emphasis
• You need to display a lot of content or multiple actions
• The notification is part of a multi-step modal flow
• User confirmation or input is required before proceeding

Best Practices

Communication and Feedback:

• Use notifications sparingly as they are disruptive
• Provide immediate feedback to build trust with users
• Choose the appropriate variant based on message severity:
  • info - General information and neutral updates
  • success - Successful operations and confirmations
  • warning - Important warnings that need attention
  • destructive - Errors and critical issues

Alert Banners:

• Use for longer-lived feedback in resource overviews, modals, and forms
• Ideal for recommendations, error states, or important information
• Keep messages clear and actionable

Don't use Alert when:

• The message is purely decorative (use regular text instead)
• You need immediate user confirmation for critical actions (use Modal/Dialog)
• The message is field-specific (use inline field-level validation)

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:

1. Alert (Container): Main wrapper with variant styling and grid layout
2. Icon (Optional): Visual indicator placed in the first grid column
3. AlertTitle (Optional): Bold heading text in the second grid column
4. 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:

• info: Standard card background with neutral text colors for general information
• success: Green color scheme for successful operations and confirmations
• warning: Blue color scheme for important warnings and cautionary messages
• destructive: Red color scheme for errors and critical issues

Examples

Default

Credits

• We take our inspiration from Shadcn UI for the alert component and style.