Buttons

This is the button component. It provides basic styles for buttons throughout the site.

As a link: <a>

As a button: <button>

:hover
Shows hover state of button.

As a link: <a>

As a button: <button>

.button--wide
Wider version of button.

As a link: <a>

As a button: <button>

.button--light
Light button style.

As a link: <a>

As a button: <button>

.button--lighter
Lighter button is styled to match the light button.

As a link: <a>

As a button: <button>

.button--blue
Blue button style.

As a link: <a>

As a button: <button>

.button--ghost
A transparent version of button.

As a link: <a>

As a button: <button>

.button--unstyled
Button with no background color or border.

As a link: <a>

As a button: <button>

.is-disabled
Disable the button. The same styles will be applied if you use the disabled attribute. The disabled attribute is the preferred method.

As a link: <a>

As a button: <button>

Markup Details
                            {% import '@components/icons/icons.twig' as icons %}

{% if modifier_class == 'button--ghost' %}
  <div style="padding: 4rem; background-color: #0C2340;color: #fff;">
    {# Render as <a>. #}
    <p>As a link: &lt;a&gt;</p>
    <div>
      <a
        href="{{ button.url }}"
        class="button {{ modifier_class }} {{ button.classes|default('') }}"
        {{ modifier_class == 'is-disabled' ? ' disabled' }}>
        <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
          <span class="button__text">
            {{ button.text }}
          </span>
          {% if button.icon %}
            <span class="button__icon">
              {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
            </span>
          {% endif %}
        </div>
      </a>
    </div>
    {# Render as <button>. #}
    <p style="margin: 2rem 0 1rem;">As a button: &lt;button&gt;</p>
    <div>
      <button
        type="{{ button.type|default('submit') }}"
        class="button {{ modifier_class }} {{ button.classes|default('') }}"
        {{ modifier_class == 'is-disabled' ? ' disabled' }}>
        <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
          <span class="button__text">
            {{ button.text }}
          </span>
          {% if button.icon %}
            <span class="button__icon">
              {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
            </span>
          {% endif %}
        </div>
      </button>
    </div>
  </div>
{% else %}
  {# Render as <a>. #}
  <p>As a link: &lt;a&gt;</p>
  <div>
    <a
      href="{{ button.url }}"
      class="button {{ modifier_class }}{{ button.classes|default('') }}"
      {{ modifier_class == 'is-disabled' ? ' disabled' }}>
      <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
        <span class="button__text">
          {{ button.text }}
        </span>
        {% if button.icon %}
          <span class="button__icon">
            {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
          </span>
        {% endif %}
      </div>
    </a>
  </div>
  {# Render as <button>. #}
  <p style="margin: 2rem 0 1rem;">As a button: &lt;button&gt;</p>
  <div>
    <button
      type="{{ button.type|default('submit') }}"
      class="button {{ modifier_class }} {{ button.classes|default('') }}"
      {{ modifier_class == 'is-disabled' ? ' disabled' }}>
      <div class="button--inner{{ button.icon is not empty ? ' has-icon' }}">
        <span class="button__text">
          {{ button.text }}
        </span>
        {% if button.icon %}
          <span class="button__icon">
            {{ icons.get(button.icon, 'icon--' ~ button.icon) }}
          </span>
        {% endif %}
      </div>
    </button>
  </div>
{% endif %}