You can use one of the 6 main colors:
is-primaryis-linkis-infois-successis-warningis-danger
Sponsor
Bulma’s Modifiers Syntax
How to use Bulma components and their alternative styles
Let's start with a simple button that uses the
"button" CSS class:
<button class="button">Button</button>
By adding the "is-primary" CSS class, you
can modify the color:
<button class="button is-primary">Button</button>
<button class="button is-primary">Button</button>
<button class="button is-link">Button</button>
<button class="button is-info">Button</button>
<button class="button is-success">Button</button>
<button class="button is-warning">Button</button>
<button class="button is-danger">Button</button>You can also alter the size:
is-smallis-mediumis-large
<button class="button is-small">Button</button>
<button class="button">Button</button>
<button class="button is-medium">Button</button>
<button class="button is-large">Button</button>Or the style or state:
is-outlinedis-loading[disabled]
<button class="button is-primary is-outlined">Button</button>
<button class="button is-loading">Button</button>
<button class="button" disabled>Button</button>
As a result, it's very easy to combine modifiers:
<button class="button is-primary is-small" disabled>Button</button>
<button class="button is-info is-loading">Button</button>
<button class="button is-danger is-outlined is-large">Button</button>