Badge

Badges are useful elements for indicating status, attach metadata to another element or displaying numbers for counts. You can easily turn a <span> or <div> element to a badge adding the badge class.

<span class="badge">Badge</span>

We provide an is-secondary modifier for using the secondary color defined in your theme as the background color of the badge:

<span class="badge is-secondary">Badge</span>

Customize

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

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