Components
Alert
A short message about something important.
Alert shows a message with a severity icon. It can carry a title, an action or a close button.
import Alert from '@hone-ui/react/Alert';
import AlertTitle from '@hone-ui/react/AlertTitle';Examples
Saved.
A new version is out.
The upload failed.
Warning
Your session ends in 5 minutes.<Alert severity="success">Saved.</Alert>
<Alert severity="info" variant="outlined">A new version is out.</Alert>
<Alert severity="error" variant="filled">The upload failed.</Alert>
<Alert severity="warning">
<AlertTitle>Warning</AlertTitle>
Your session ends in 5 minutes.
</Alert>Alert props
| Prop | Type | Default | Description |
|---|---|---|---|
severity | 'success', 'info', 'warning', 'error' | 'success' | Picks the icon and the default color. |
variant | 'standard', 'filled', 'outlined' | 'standard' | A tint, a solid fill or a border. |
color | a severity or any palette key | severity | The color. |
icon | ReactNode, false | Replaces the icon. false hides it. | |
iconMapping | { success?, info?, warning?, error? } | Icons per severity. | |
onClose | (event) => void | Shows a close button. | |
closeText | string | 'Close' | The close button's label. |
action | ReactNode | Content at the end. Replaces the close button. | |
role | string | 'alert' | The ARIA role. |
slotProps.closeButton, slotProps.closeIcon | object | Props for the close button and its icon. | |
sx, className, style, ref, children | Standard. |
AlertTitle takes children, sx, className, style and ref. It is a Server Component.
Notes
- Filled alerts use the color's main shade with its contrast text in light and dark mode.
- In the Material look, light filled warning and info keep the default palette's 3:1 contrast.
components,componentsPropsandslotsare not supported.
Accessibility
role="alert" makes screen readers announce the message when it appears. Use role="status"
for messages that can wait.