Floating Action Button

Dynamic and responsive, Floating Action Buttons (FABs) intuitively surface contextual actions, enhancing mobile navigation seamlessly.

Example

<button type="button" class="nj-fab">
  <span aria-hidden="true" class="material-icons">add</span>
  <span class="nj-sr-only">Add</span>
</button>

Disable state

Use the disabled attribute on the button.

<button type="button" class="nj-fab" disabled>
  <span aria-hidden="true" class="material-icons">add</span>
  <span class="nj-sr-only">Add</span>
</button>

Size variation

The FAB is available in small by using .nj-fab--sm

<button type="button" class="nj-fab nj-fab--sm">
  <span aria-hidden="true" class="material-icons">add</span>
  <span class="nj-sr-only">Add</span>
</button>

FAB menu

The FAB “speed dial mode” can open multiple options with a menu placement data-placement="bottom" you can set placement as top, right, bottom or left, without attribute the default is top.

<div style="display: flex; flex-direction: column; gap: var(--nj-semantic-size-spacing-48); height: 450px; align-items: flex-start; justify-content: flex-end">
  <div class="nj-fab-menu">
    <button type="button" class="nj-fab">
      <span aria-hidden="true" class="material-icons">add</span>
      <span class="nj-sr-only">Add</span>
    </button>
    <ul class="nj-fab__actions">
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">attachment</span>
          <span class="nj-sr-only">Add an attachment</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">add_a_photo</span>
          <span class="nj-sr-only">Add a photo</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">cloud_upload</span>
          <span class="nj-sr-only">Upload</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">create_new_folder</span>
          <span class="nj-sr-only">Create new folder</span>
        </button>
      </li>
    </ul>
  </div>
  <div class="nj-fab-menu" data-placement="right">
    <button type="button" class="nj-fab">
      <span aria-hidden="true" class="material-icons">add</span>
      <span class="nj-sr-only">Add</span>
    </button>
    <ul class="nj-fab__actions">
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">attachment</span>
          <span class="nj-sr-only">Add a photo</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">add_a_photo</span>
          <span class="nj-sr-only">Upload</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">cloud_upload</span>
          <span class="nj-sr-only">Create new folder</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">create_new_folder</span>
          <span class="nj-sr-only">Add</span>
        </button>
      </li>
    </ul>
  </div>
</div>

Fab menu size variation

If you want to use the small size variation with the speed dial mode, add

  • .nj-fab--sm modifier to the main nj-fab button element
  • .nj-fab__actions--sm modifier to the nj-fab__actions list element
<div class="nj-fab-menu" data-placement="right">
    <button type="button" class="nj-fab nj-fab--sm">
      <span aria-hidden="true" class="material-icons">add</span>
      <span class="nj-sr-only">Add</span>
    </button>
    <ul class="nj-fab__actions nj-fab__actions--sm">
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">attachment</span>
          <span class="nj-sr-only">Add an attachment</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">add_a_photo</span>
          <span class="nj-sr-only">Add a photo</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">cloud_upload</span>
          <span class="nj-sr-only">Upload</span>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <span aria-hidden="true" class="material-icons">create_new_folder</span>
          <span class="nj-sr-only">Create new folder</span>
        </button>
      </li>
    </ul>
  </div>

In terms of accessibility, to improve visibility, try and optimize the contrast of the floating action button:

  • With the background it is floating in: a white borderline might help.
  • Between its background and its text.