--- title: Modifiers syntax layout: documentation doc-tab: overview doc-subtab: modifiers breadcrumb: - home - documentation - overview - overview-modifiers --- {% capture button_example %} Button {% endcapture %} {% capture button_primary_example %} Button {% endcapture %} {% capture button_colors %} Button Button Button Button Button Button {% endcapture %} {% capture button_sizes %} Button Button Button Button {% endcapture %} {% capture button_states %} Button Button Button {% endcapture %} {% capture button_combinations %} Button Button Button {% endcapture %}

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

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

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

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

You can use one of the 6 main colors:

{% highlight html %}{{ button_colors }}{% endhighlight %}

You can also alter the size:

{% highlight html %}{{ button_sizes }}{% endhighlight %}

Or the style or state:

{% highlight html %}{{ button_states }}{% endhighlight %}

As a result, it's very easy to combine modifiers:

{% highlight html %}{{ button_combinations }}{% endhighlight %}