Floating Action Button - Component

The .fab—floating action button—is designed to be compact where space is limited and expanded otherwise. There's also an option for it to be docked at the bottom right of the viewport.

View full screen
Code

Source (Nunjucks)

<a
  href="{{ data.url }}"
  class="fab"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.docked %}data-docked{% endif %}
  {% if data.iconOnly %}data-icon-only{% endif %}
>
  {% include "icons/" ~ data.icon %}
  <span class="fab__label">{{ data.text }}</span>
</a>

Output

<a href="/newsletter/" class="fab">
  <svg
    width="24"
    height="24"
    viewbox="0 0 24 24"
    role="img"
    aria-label="An envelope with plus icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z"
      fill="currentColor"
      fill-rule="nonzero"
    />
  </svg>
  <span class="fab__label">Subscribe</span>
</a>

Information

Add a data-icon-only exception to always visually hide the label, regardless of viewport size.

Just like with the button, you can add a primary or secondary data-type to set a theme.

To dock the FAB at the bottom right of the screen, add data-docked to it.

Key links

Variants

Docked

View full screen
Code

Source (Nunjucks)

<a
  href="{{ data.url }}"
  class="fab"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.docked %}data-docked{% endif %}
  {% if data.iconOnly %}data-icon-only{% endif %}
>
  {% include "icons/" ~ data.icon %}
  <span class="fab__label">{{ data.text }}</span>
</a>

Output

<a href="/newsletter/" class="fab" data-docked>
  <svg
    width="24"
    height="24"
    viewbox="0 0 24 24"
    role="img"
    aria-label="An envelope with plus icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z"
      fill="currentColor"
      fill-rule="nonzero"
    />
  </svg>
  <span class="fab__label">Subscribe</span>
</a>

Icon Only

View full screen
Code

Source (Nunjucks)

<a
  href="{{ data.url }}"
  class="fab"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.docked %}data-docked{% endif %}
  {% if data.iconOnly %}data-icon-only{% endif %}
>
  {% include "icons/" ~ data.icon %}
  <span class="fab__label">{{ data.text }}</span>
</a>

Output

<a href="/newsletter/" class="fab" data-icon-only>
  <svg
    width="24"
    height="24"
    viewbox="0 0 24 24"
    role="img"
    aria-label="An envelope with plus icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z"
      fill="currentColor"
      fill-rule="nonzero"
    />
  </svg>
  <span class="fab__label">Subscribe</span>
</a>

Primary

View full screen
Code

Source (Nunjucks)

<a
  href="{{ data.url }}"
  class="fab"
  {% if data.type %}data-type="{{ data.type }}"{% endif %}
  {% if data.docked %}data-docked{% endif %}
  {% if data.iconOnly %}data-icon-only{% endif %}
>
  {% include "icons/" ~ data.icon %}
  <span class="fab__label">{{ data.text }}</span>
</a>

Output

<a href="/newsletter/" class="fab" data-type="primary">
  <svg
    width="24"
    height="24"
    viewbox="0 0 24 24"
    role="img"
    aria-label="An envelope with plus icon"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M13 20H4c-1.1 0-2-.9-2-2l.01-12c0-1.1.89-2 1.99-2h16c1.1 0 2 .9 2 2v7h-2V8l-8 5-8-5v10h9v2zm-1-9l8-5H4l8 5zm8 7h3v2h-3v3h-2v-3h-3v-2h3v-3h2v3z"
      fill="currentColor"
      fill-rule="nonzero"
    />
  </svg>
  <span class="fab__label">Subscribe</span>
</a>