This component has been designed to be easily customizable.

There is 2 ways to customize it, depending on the way you integrate this component into your project.


If you use the Sass source into your project, all you have to do is to customize variables before importing the component.

$badge-height: 16px

@import '@creativebulma/bulma-badge'


Variable name Description Default value
$badge-font-size .65rem
$badge-height 14px
$badge-padding .05rem .15rem
$badge-shadow 0 0 0 2px $scheme-main


If you uses the CSS version you have to customize Sass source files then rebuild the CSS file.

First, let’s install some packages!

npm install

This command will install all development required package.


Customize Sass variables defined within src/sass/index.sass file.


You can build CSS files by launching the build process with the command:

npm run build

Styles are built using node-sass from src/sass directory and minify them. Built files will be copied into /dist directory (can be customized within package.json).