Alert

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-none">
    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-none">
    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-none">
    <div>Content of the alert message</div>
    <div class="close has-ml-auto"></div>
</div>

Customize

You can customize the alert element using the alerts field of your theme configuration. Styles defined in the alerts.default field will be applied to the base alert element, and any other field will generate additional variant modifiers for the alert element.

export default {
    alerts: {
        default: {
            backgroundColor: "primary",
            color: "white",
        },
        // ...other additional alert variants
    },
    // ...other configuration
};