Alert
Alerts can be used to display important information like feedback on why an action failed or wether it succeeded.
Because most alerts can be dismissed the Alert component is stateful by default. You can use the variant UncontrolledAlert if you don't want to manage the closed status by yourself. If you don't provide theisOpen and the toggle property theAlert will not be closeable.
Color
Alerts can be colored like most other components. Use the color of the alert to visualize the type of information in contains. Use info for information that doesn't require the attention of the user.danger should be used to for alerts that indicate a failure.
Uncontrolled Alert
Uncontrolled alerts handle their opened state by themselves which means they can be closed without requiring their state to be managed by their parent component. They are the component of choice for simple use-cases.
State
The isOpen property controls the visibility of the alert. The toggle property can be used to configure a callback that gets called when the user clicks the close button.
Fade animation
The animation can be disabled using the fade attribute. It is set to true by default but can be turned off. This property can be applied to both UncontrolledAlert and Alert
Links in Alerts
The special alert-link class can be applied to links in alerts so that their color matches the color of the surrounding alert.
Alert (extends HTMLElement)
| Property | Type |
|---|---|
color? | "primary" | "secondary" | "dark" | "white" | "danger" |
transition? | FadeProps |
isOpen? | boolean |
toggle? | boolean |
UncontrolledAlert (extends HTMLElement)
| Property | Type |
|---|---|
color? | "primary" | "secondary" | "dark" | "white" | "danger" |
transition? | FadeProps |
