Alert
Simple feedback messages for user actions.
Install and import
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.
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 jungleWelcome to the jungle
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.
Welcome to the jungle
Properties
Alert
| Name | Type(s) | Default | Required |
|---|---|---|---|
| children | node | ||
| variant | success error warning info | error |
Alert.Title
| Name | Type(s) | Default | Required |
|---|---|---|---|
| children | node | ||
| icon | node | ||
| variant | success error warning info |
Dependencies
- - @welcome-ui/box^3.0.0-alpha.2
- - @welcome-ui/stack^3.0.0-alpha.2
- - @welcome-ui/system^3.0.0-alpha.2
- - @welcome-ui/text^3.0.0-alpha.2
- - @welcome-ui/variant-icon^3.0.0-alpha.2
Peer dependencies
- - @xstyled/styled-components^2.1.0
- - @xstyled/system^2.1.0
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.0.0