HelpTribe.

Alert

Contextual feedback messages for status updates, warnings, and error states. Supports five severity variants.

Installation

$ npx shadcn@latest add alert

Preview

Variants

Usage (React/TSX)

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

export default function StatusMessages() {
  return (
    <div className="space-y-4">
      <Alert variant="success">
        <AlertTitle>Compliance Passed</AlertTitle>
        <AlertDescription>All checks completed successfully.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Sync Failed</AlertTitle>
        <AlertDescription>Unable to reach the server.</AlertDescription>
      </Alert>
    </div>
  )
}

Props

PropTypeDefaultDescription
variant"default" | "success" | "warning" | "destructive" | "info""default"The visual style of the alert.
classNamestringβ€”Additional CSS classes to apply.
childrenReactNodeβ€”Content inside the alert.