Feedback & Overlays
Alert
An inline banner in 5 colors and 2 sizes, with an optional close button and action.
Usage
Positive
Text for notifications here.
Negative
Text for notifications here.
Installation
npm install @wunderui/reactThen import what you need:
import {
Alert,
AlertDescription,
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
AlertTitle,
} from "@wunderui/react"Examples
Plain
A neutral message.
Notification Title.
Text for notifications here.
Positive
Something worked.
Positive
Text for notifications here.
Primary
Information worth noticing.
Primary
Text for notifications here.
Negative
Something went wrong.
Negative
Text for notifications here.
Warning
Something needs attention.
Warning
Text for notifications here.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Status modals grid
Alerts as the status line of confirmation cards.
API Reference
| Prop | Type | Default |
|---|---|---|
| variant | "plain" | "positive" | "primary" | "negative" | "warning" | "plain" |
| size | "small" | "large" | "large" |
| onClose | () => void | — |