Buttons

Buttons are essential elements in any website or application for actions. The button class can be used in a <button>, <input type="submit">, <a> or <div> tag.

<button class="button">Primary button</button>

You can style your button using the secondary color of your theme with the mofidier is-secondary:

<button class="button is-secondary">Secondary button</button>

You can style a button as disabled using the is-disabled modifier and adding a disabled attribute to the button:

<button class="button is-disabled">Disabled button</button>

We also provide the is-full modifier to change the button width to the full parent width:

<button class="button is-full">Full width button</button>

Customize

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

export default {
    badges: {
        default: {
            backgroundColor: "primary",
            color: "white",
        },
        // ...other additional buttons mixins
        // For examplem the following 'disabled' variant will generate a '.button.is-disabled' modifier
        disabled: {
            cursor: ["not-allowed", "!important"],
            opacity: ["0.6", "!important"],
        },
    },
    // ...other configuration
};