Alert
Allows user to display a short, important message to get attention.
version
4.1.2
install
yarn add @welcome-ui/alert
usage
import { Alert } from '@welcome-ui/alert'
Variants #
The default is error
.
<Alert><Alert.Title>Error variant</Alert.Title><span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsanultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span></Alert><Alert variant="warning"><Alert.Title>Warning variant</Alert.Title><span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsanultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span></Alert><Alert variant="success"><Alert.Title>Success variant</Alert.Title><span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsanultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span></Alert><Alert variant="info"><Alert.Title>Info variant</Alert.Title><span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsanultrices. Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span></Alert>
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
<Alert><Alert.Title>Welcome to the jungle</Alert.Title></Alert><Alert><Alert.Title icon={<HeartIcon />}>Welcome to the jungle</Alert.Title></Alert><Alert><Alert.Title icon="😵">Welcome to the jungle</Alert.Title></Alert><Alert><Alert.Title icon={null}>Welcome to the jungle</Alert.Title></Alert>
With Button #
When usin Alert.Button
, we will show it in a column on the right
<Alert><Alert.Title>Welcome to the jungle</Alert.Title><span>Nunc laoreet egestas nulla, et dapibus sem malesuada in. Suspendisse eleifend accumsan ultrices.Phasellus iaculis nisi sed dui ornare commodo. Nullam dapibus varius nibh a ornare.</span><Alert.Button variant="secondary">Button</Alert.Button></Alert>
<Alert><Alert.Title>Welcome to the jungle</Alert.Title><Alert.Button variant="secondary">Button</Alert.Button></Alert>
Properties #
Alert #
Name | Type(s) | Default | Required |
---|---|---|---|
variant | "error" "warning" "info" "success" | error |
Alert.Title #
Name | Type(s) | Default | Required |
---|---|---|---|
icon | Element | ||
variant | "error" "info" "success" "warning" |