Elements

We provide a collection of built-in UI elements that you can customize and reuse across your projects, that includes buttons, alerts, navigation links, and more!

Disable elements

Individual elements can be disabled providing an object in the modules field of your configuration with the name of the element setted to false:

export default {
    modules: {
        alert: false,
        button: false,
    },
    // ...other configuration
};

Usage

Just apply the element classname to the HTML tag that you want to style:

<button class="button">Submit</button>

Some elements will provide additional variant modifiers that you can use to change the default style of the element:

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

Customize elements

Mixins can be used to customize and change the look and feel of elements. Each element will look for a specific mixin in your theme configuration.

export default {
    layout: {
        // The card element will use this mixin to extend the default styles
        card: {
            backgroundColor: "white",
            color: "black",
        },
    },
};

Some elements will generate additional variant modifiers based in the mixins that you specify in your configuration. For example, buttons will generate one additional variant for each item defined in the buttons field of your configuration. As an example, the following buttons configuration:

export default {
    buttons: {
        default: {
            color: "white",
        },
        outlined: {
            borderColor: "primary",
            borderStyle: "solid",
            borderWidth: "2px",
        },
        full: {
            textAlign: "center",
            width: "100%",
        },
    },
};

Will generate the following CSS:

.button {
    /* Default button styles plus defined in buttons.default */
}
.button.is-outlined {
    /* Styles defined in buttons.outlined */
}
.button.is-full {
    /* Styles defined in buttons.full */
}

Note that the default variant will will be automatically applied to the base element styles instead of generating an additional .is-default modifier.

There is the list of elements and the mixin path that can be used to customize the styles of the element:

Note that some elements will reuse the styles that you define in the styles section of your theme, for example the progress element.