Alert

Simple feedback messages for user actions.

Install and import #

yarn add @welcome-ui/alert @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Alert } from '@welcome-ui/alert'

Variants #

The default is error.

Error variant
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.
Warning variant
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.
Success variant
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.
Info variant
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.
Show editor

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

Welcome to the jungle
Welcome to the jungle
😵
Welcome to the jungle
Welcome to the jungle
Show editor

With Button #

When usin Alert.Button, we will show it in a column on the right

Welcome to the jungle
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.
Button
Show editor

Welcome to the jungle
Button
Show editor

Properties #

Alert #

Alert.Title #

Dependencies #

• - @welcome-ui/box
  ^3.0.0
• - @welcome-ui/stack
  ^3.0.0
• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/text
  ^3.1.1
• - @welcome-ui/variant-icon
  ^3.4.3

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1