'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
Alert
A message in the page: info, success, warning or danger, with actions.
Ant Design: Alert
import { Alert } from '@alea/ui';
Examples
Tones
Info, success, warning and danger.
New in 0.1
Forty components with dark and light.
Variables created
11 colors in the Theme collection.
One mode on the Free plan
Dark goes into its own collection.
Couldn't load the font
Install Inter or pick another font.
Actions and dismiss
Buttons on the right, a close button, and live to announce it.
Lab Pro is out
Thirteen plugins, one license.
Props
Alert props
A message in the page: info, success, warning or danger.
| Prop | Type | Default | Description |
|---|---|---|---|
actions | ReactNode | - | Buttons or links on the right (or below on small screens). |
hideIcon | boolean | - | Hide the icon. |
live | boolean | - | Announce it to screen readers when it appears (role alert for danger, status otherwise). Default false for alerts on page load. |
onDismiss | (() => void) | - | Shows a close button and calls this. |
title | ReactNode | - | The headline, in bold. |
tone | "danger" | "success" | "warning" | "accent" | "info" | "neutral" | 'info' | info (default), success, warning, danger, accent or neutral. |
Accessibility
- Set live when it appears after something the person did, so it is announced.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves to the actions and the close button |
| Enter | Runs the focused action |
Do and don't
Do
- Say what happened and what to do.
Don't
- Don't use danger for things that are not errors.