Alert
Allows user to display a short, important message to get attention.
version
5.0.0-alpha.16
install
yarn add @welcome-ui/alert
usage
import { Alert } from '@welcome-ui/alert'
Variants #
Sizes #
By default the size is sm.
With only Alert.Title #
We're adding an icon matching the variant (see above examples) but you can remove it or add a custom node instead
With CTA #
When using a cta prop, we will show it in a column on the right
Full Width #
CloseButton #
To show a close button you need to pass your function on the handleClose property.
Properties #
Alert #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| variant | "error" "focused" "info" "success" "warning" "default" | default | |
| size | "sm" "md" | sm | |
| icon | Element | ||
| isFullWidth | Boolean | ||
| closeButtonDataTestId | string | ||
| cta | Element | ||
| handleClose | () => void @description add a close button with an onclick handleClose function |
Alert.Title #
| Name | Type(s) | Default | Required |
|---|---|---|---|
| variant | "error" "focused" "info" "success" "warning" "default" | ||
| size | "sm" "md" | ||
| icon | Element | ||
| isFullWidth | Boolean | ||
| closeButtonDataTestId | string | ||
| cta | Element | ||
| handleClose | () => void @description add a close button with an onclick handleClose function |