Button

{{ design.patterns.renderPattern('button', {}) | safe }}

Source (Nunjucks)

{% if data.href %}
  <a class="button" href="{{ data.href }}" {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
  {% else %}
    <button class="button"  {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
    {% endif %}
    <span>{{ data.label }}</span>
    {% include "icons/arrow.svg" %}
    <span class="corner" aria-hidden="true"></span>
    {% if data.href %}
    </a>
  {% else %}
  </button>
{% endif %}

Information

Required patterns

Corner

Variants

Link

{{ design.patterns.renderPattern('button/link', {}) | safe }}

View full screen

Source (Nunjucks)

{% if data.href %}
  <a class="button" href="{{ data.href }}" {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
  {% else %}
    <button class="button"  {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
    {% endif %}
    <span>{{ data.label }}</span>
    {% include "icons/arrow.svg" %}
    <span class="corner" aria-hidden="true"></span>
    {% if data.href %}
    </a>
  {% else %}
  </button>
{% endif %}

Secondary

{{ design.patterns.renderPattern('button/secondary', {}) | safe }}

View full screen

Source (Nunjucks)

{% if data.href %}
  <a class="button" href="{{ data.href }}" {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
  {% else %}
    <button class="button"  {% if data.variant %}data-button-variant="{{ data.variant }}"{% endif %}>
    {% endif %}
    <span>{{ data.label }}</span>
    {% include "icons/arrow.svg" %}
    <span class="corner" aria-hidden="true"></span>
    {% if data.href %}
    </a>
  {% else %}
  </button>
{% endif %}