Alert
An inline status message with title and actions.
Compose Alert.Title, Alert.Description, and Alert.Actions. Control dismissal with open and onOpenChange. Besides primary, secondary, success, and danger, the warning color is available.
Live example
Headline
Description
Example controls
Usage
import { Alert } from '@prosazhin/pbcomponents';
<Alert
color='success'
defaultOpen
>
<Alert.Title>Saved</Alert.Title>
<Alert.Description>Changes saved.</Alert.Description>
</Alert>;Component API
Compound parts: Alert.Title, Alert.Description, Alert.Actions.
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | ReactNode | Title, description and optional actions. | — |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning'primary · secondary · success · danger · warning | Semantic color. | primary |
open | boolean | Controlled visibility. | — |
defaultOpen | boolean | Initial visibility when uncontrolled. | true |
onOpenChange | (open) => void | Called when the alert closes. | — |
closeButtonAriaLabel | string | Accessible name of the close button. | Close alert |
Alert.Title.as | 'h1' … 'h6'h1 · h2 · h3 · h4 · h5 · h6 | Heading level of Alert.Title. | h3 |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.