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!
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: { button: false, table: false, }, // ...other configuration };
Just apply the element classname to the HTML tag that you want to style:
<button class="button">Submit</button>
Some elements will provide additional modifiers that you can use to change the default style of the element:
<button class="button is-secondary is-full"> Full width button </button>
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 { text: { // The title element will use this mixin to extend the default styles heading: { color: "black", lineHeight: "1.25", }, }, };
There is the list of elements and the mixin path that can be used to customize the styles of the element:
Element | Mixin path |
---|---|
alert | alerts or alerts.default if more mixins are added to the alerts group. |
badge | badges or badges.default if more mixins are added to the badges group. |
button | buttons or buttons.default if more mixins are added to the buttons group. |
card | cards or cards.default of more mixins are added to the cards group. |
checkbox | forms.checkbox |
close | buttons.close |
column | columns |
container | layout.container |
crumb | links.crumb |
divider | styles.hr |
dropdown | links.dropdown |
input | forms.input |
label | forms.label |
menu | buttons.menu |
modal | dialogs.modal |
navlink | links.nav |
paragraph | text.paragraph |
progress | styles.progress |
radio | forms.radio |
scrim | dialogs.scrim |
select | forms.select |
slider | forms.slider |
spinner | spinners |
switch | forms.switch |
table | styles.table |
textarea | forms.textarea |
title | text.heading |
Note that some elements will reuse the styles that you define in the styles
section of your theme, for example the progress
or the table
elements.
Mixins can be used also to create additional modifiers for the element. For example, the following mixin:
export default { buttons: { default: { "&.is-outlined": { backgroundColor: "transparent", borderColor: "primary", borderStyle: "solid", borderWidth: "0.125rem", color: "primary", }, }, }, };
Will generate the following CSS:
.button { /* default styles */ } .button.is-outlined { background-color: transparent; border: 0.125rem solid #1c76fd; color: #1c76fd; }