WUI logo

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 accumsan
ultrices. 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 accumsan
ultrices. 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 accumsan
ultrices. 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 accumsan
ultrices. 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 #
NameType(s)DefaultRequired
variant
"error"
"warning"
"info"
"success"
error
Alert.Title #
NameType(s)DefaultRequired
icon
Element
variant
"error"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #

Previous

Tag

Next

Toast