--- title: Modifiers syntax subtitle: "Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
They all start with is- or has-." layout: documentation doc-tab: modifiers doc-subtab: syntax breadcrumb: - home - documentation - modifiers - modifiers-syntax --- {% capture button_example %} Button {% endcapture %} {% capture button_primary_example %} Button {% endcapture %}

Let's start with a simple button that uses the "button" CSS class:

{{button_example}}

{% highlight html %}{{button_example}}{% endhighlight %}

By adding the "is-primary" CSS class, you can modify the color:

{{button_primary_example}}

{% highlight html %}{{button_primary_example}}{% endhighlight %}

You can use one of the 6 main colors:

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

Button

Button

Button

Button

Button

Button

{% highlight html %} Button Button Button Button Button Button {% endhighlight %}

You can also alter the size:

  • is-small
  • is-medium
  • is-large

Button

Button

Button

Button

{% highlight html %} Button Button Button Button {% endhighlight %}

Or the style or state:

  • is-outlined
  • is-loading
  • [disabled]

Button

Button

Button

{% highlight html %} Button Button Button {% endhighlight %}