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 the
isOpen and the
toggle property the
Alert will not be closeable.
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 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.
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.
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
Links in Alerts
alert-link class can be applied to links in alerts so that their color matches the color of the surrounding alert.