Fabric UI

Alert

Fabric UI Alert component for React and Tailwind CSS. Displays a callout for user attention, such as a success message, warning, or error.

Radix UIBase UI
Radix UI
import {
  Alert,
  AlertDescription,

Installation

pnpm dlx shadcn@latest add @fabric-ui/alert

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/fabric-ui/alert"
<Alert>
  <ShieldCheckIcon />
  <AlertTitle>Security Update</AlertTitle>
  <AlertDescription>Update your password and enable 2FA.</AlertDescription>
  <AlertAction>
    <Button variant="outline" size="xs">
      Dismiss
    </Button>
    <Button size="xs">Update</Button>
  </AlertAction>
</Alert>

Examples

With Icon

import {
  Alert,
  AlertDescription,

With Action Buttons

import {
  Alert,
  AlertAction,

With Extended Message

import {
  Alert,
  AlertDescription,

With Title and Action Buttons

import {
  Alert,
  AlertAction,

With Description and Action Buttons

import {
  Alert,
  AlertAction,

Info Alert

import {
  Alert,
  AlertDescription,

Success Alert

import {
  Alert,
  AlertDescription,

Warning Alert

import {
  Alert,
  AlertDescription,

Destructive Alert

import {
  Alert,
  AlertDescription,

Invert Alert

import {
  Alert,
  AlertDescription,

API Reference

Fabric UI keeps the familiar Alert API while extending it with semantic color tokens such as --success, --info, --warning and --invert for alert variants instead of utility classes.

This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>This is a success alert</AlertDescription>
</Alert>

Props

PropType
variant"default" | "destructive" | "info" | "success" | "warning" | "invert"

More Alert components

Browse 20 production-ready Alert components for success, warning, destructive, and inline actions. Alerts follow accessible roles from the Radix stack and stay aligned with the Fabric UI design language.

Browse all 20 Alert components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.