An alert is a colored notification block generally used to catch the attention of your users of something important. An alert can be created adding the alert
class to a <div>
tag.
<div class="alert has-mb-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div>
We provide an is-secondary
modifier for using the secondary color defined in your theme as the background color of the alert:
<div class="alert is-secondary has-mb-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div>
You can add a close button to the alert using the close
element:
<div class="alert has-mb-0"> <div>Content of the alert message</div> <div class="close has-ml-auto"></div> </div>
The alert element will apply the styles defined in the alerts
field of your theme configuration.
export default { alerts: { backgroundColor: "primary", color: "white", }, // ...other configuration };
If you use the alerts
group for more mixins, this element will use alerts.default
instead:
export default { alerts: { default: { backgroundColor: "primary", color: "white", }, // ...other additional alerts mixins }, // ...other configuration };