Alert
Inline, persistent messages tied to a section of the page. Colour, icon and title all carry the meaning so it never relies on colour alone.
Types
Something you should knowA short, plain explanation and what to do next.
Something you should knowA short, plain explanation and what to do next.
Something you should knowA short, plain explanation and what to do next.
Something you should knowA short, plain explanation and what to do next.
<Alert type="warning" title="Storage almost full">Free up space to keep syncing.</Alert>
Dismissible
Something you should knowA short, plain explanation and what to do next.
<Alert title="…" onDismiss={() => setShown(false)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "info" | "success" | "warning" | "error" | "info" | Meaning. |
title | ReactNode | — | Title. |
children | ReactNode | — | Message. |
onDismiss | () => void | — | Shows a close button when set. |
Usage
Do
- Say what happened and what to do next.
Don't
- Use for transient confirmations — use Toast.