Containers
InlineAlert
A bordered or tinted block that states something important in context, with an optional action.
Preview
Props
| Prop | Type | Description |
|---|---|---|
titleRequired | React.ReactNode | |
description | React.ReactNode | |
variant | 'neutral' | 'informative' | 'positive' | 'notice' | 'negative' | |
fillStyle | 'border' | 'subtle' | |
className | string | |
children | React.ReactNode |
Guidelines
A bordered or tinted block that states something important in context, with an optional action.
Provide: title, description, variant (neutral, informative, positive, notice, negative), fillStyle (border default, or subtle), and buttons as children.
- The title says what happened; the description says what it means and what to do.
- One alert per region. If everything is urgent, nothing is.