Alert
Inline callout surface for important context, warnings, and success confirmation inside the page layout.
Install
npx react-principles add alertTheme Preview
Information
System maintenance starts at 22:00 UTC.
Published
Your release is now visible to all workspace members.
Unsaved changes
You have pending edits that are not yet published.
Payment failed
The latest invoice could not be processed automatically.
Heads up
Team invitations are sent from the workspace email domain.
Information
System maintenance starts at 22:00 UTC.
Published
Your release is now visible to all workspace members.
Unsaved changes
You have pending edits that are not yet published.
Payment failed
The latest invoice could not be processed automatically.
Heads up
Team invitations are sent from the workspace email domain.
Live Demo
Information
System maintenance starts at 22:00 UTC.
Published
Your release is now visible to all workspace members.
Unsaved changes
You have pending edits that are not yet published.
Payment failed
The latest invoice could not be processed automatically.
Heads up
Team invitations are sent from the workspace email domain.
Code Snippet
import { Alert } from "@/ui/Alert"; <Alert variant="warning"> <Alert.Title>Unsaved changes</Alert.Title> <Alert.Description>You have pending edits that are not published yet.</Alert.Description> <Alert.Footer> <Alert.Action>Review changes</Alert.Action> </Alert.Footer> </Alert>
Copy-Paste (Single File)
import type { ButtonHTMLAttributes, HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; export type AlertVariant = "default" | "success" | "warning" | "error" | "info"; export interface AlertProps extends HTMLAttributes<HTMLDivElement> { variant?: AlertVariant; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "warning" | "error" | "info" | "default" | Changes the semantic styling for the alert surface. |
className | string | — | Additional classes merged into the alert container. |