Alert

import CheckCircle2Icon from "@material-symbols/svg-400/rounded/check_circle.svg?react"
import InfoIcon from "@material-symbols/svg-400/rounded/info.svg?react"

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui/alert
Copy

Usage#

Copyimport {
  Alert,
  AlertAction,
  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
├── AlertTitle
├── AlertDescription
└── AlertAction

Basic#

A basic alert with an icon, title and description.

import CheckCircle2Icon from "@material-symbols/svg-400/rounded/check_circle.svg?react"

import {

Destructive#

Use variant="destructive" to create a destructive alert.

import AlertCircleIcon from "@material-symbols/svg-400/rounded/error.svg?react"

import {

Status Variants#

Use variant="warning", variant="success", or variant="info" for semantic status alerts.

import CheckCircle2Icon from "@material-symbols/svg-400/rounded/check_circle.svg?react"
import InfoIcon from "@material-symbols/svg-400/rounded/info.svg?react"
import TriangleAlertIcon from "@material-symbols/svg-400/rounded/warning.svg?react"

Action#

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

import {
  Alert,
  AlertAction,

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 AlertTriangleIcon from "@material-symbols/svg-400/rounded/warning.svg?react"

import {

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

"use client"

import * as React from "react"

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.