Alert
Allows user to display a short, important message to get attention.
version
5.1.0
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 |