WUI logo

Alert

Allows user to display a short, important message to get attention.

version

5.14.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 #
NameType(s)DefaultRequired
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 #
NameType(s)DefaultRequired
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

Packages #

Dependencies #
Peer dependencies #

Previous

Tag

Next

Toast