UI ComponentsData display
Alert
Display contextual feedback inline.
Import
import { Alert } from "@puzzle-ui/ui";Severity
Use severity to communicate the outcome, not color alone. Error alerts are assertive; other severities use polite status announcements.
Variant, icon, and dismissal
closable dismisses the alert internally and calls onClose. Set icon={false} to remove the icon, or provide a custom node.
API
| Prop | Type | Default | Description |
|---|---|---|---|
severity | "success" | "info" | "warning" | "error" | "info" | Feedback intent and live-region semantics. |
variant | "standard" | "outlined" | "filled" | "standard" | Visual treatment. |
title | ReactNode | - | Optional heading. |
children | ReactNode | - | Message body. |
icon | ReactNode | false | Severity icon | Custom icon or no icon. |
closable | boolean | false | Adds a dismiss button. |
closeLabel | string | "Dismiss alert" | Accessible button name. |
onClose | () => void | - | Called after dismissal. |
Native div attributes, className, and style are supported. Dismissed alerts render nothing; remount to show them again.