Button - Component

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button">A button</button>

Information

You can add the .button class to either <button> or <a> elements.

To apply a different type, set a data-type attribute with either primary or secondary as the value.

You can also add icons by adding an <svg> as a child item of the button. If you add an icon, you should wrap the label in an element such as a <span> so the margin rules can affect it.

Key links

Sass file

Variants

Primary

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button" data-type="primary">A primary button</button>

Secondary

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button" data-type="secondary">A secondary button</button>

Clear

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button" data-type="clear">A clear button</button>

Disabled

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button" data-type="secondary" disabled>A disabled button</button>

With Icon

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button">
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="currentColor"
    role="img"
    aria-label="plus"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
  </svg>
  <span>A button with an icon</span>
</button>

Primary With Icon

View full screen

Code

Source (Nunjucks)

<button 
  class="button"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.attribute %}{{ data.attribute }}{% endif %}
>
  {% if data.icon %}
    {% include "icons/" ~ data.icon %}
    <span>{{ data.text }}</span>
  {% else %}
  {{ data.text }}
  {% endif %}
  
</button>

Output

<button class="button" data-type="primary">
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="currentColor"
    role="img"
    aria-label="plus"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M20 13h-7v7h-2v-7H4v-2h7V4h2v7h7v2z" />
  </svg>
  <span>A primary button with an icon</span>
</button>