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
};