Alert

import { CheckCircle2Icon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertDemo() {

Installation

pnpmnpmyarnbun
pnpm slabui add alert
Copy

Usage

Copyimport {
  Alert,
  AlertAction,
  AlertButton,
  AlertButtonIcon,
  AlertContent,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

Copy<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Composition

Use the following composition to build an Alert:

CopyAlert
├── Icon
├── AlertContent
├──── AlertTitle
├──── AlertDescription
├── AlertAction
└────  Button

Examples

Basic

A basic alert with an icon, title and description.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertBasic() {
  return (
    <div className="grid w-full max-w-md items-start gap-4 scr">

Variants

Use variant to change the appearance of the alert.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertVariants() {
  return (
    <>

Action

Use AlertAction and Button to add a button or other action element to the alert.

import { InfoIcon, X } from "lucide-react"

import {
  Alert,
  AlertAction,

With Icons

Use svg Icon to add an icon to the alert button.

import { InfoIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertBasic() {

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

import { CheckCircle2 } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export function AlertCustom() {

API Reference

Alert

The Alert component displays a callout for user attention.

AlertTitle

The AlertTitle component displays the title of the alert.

AlertDescription

The AlertDescription component displays the description or content of the alert.

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.