Floating Action Button

Floating Action Buttons are just like buttons but they are not static. They follow the journey of the user and display contextual actions at the perfect moment. They are useful for mobile navigation.

To do

React

Vanilla

Figma

Last updated v5.0.0

Example

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

Disable state

Add the .disabled class on the tag.

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

Speed dial mode

The FAB 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-size-space-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="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="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="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="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="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="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="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="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="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="sr-only">Add</span>
        </button>
      </li>
    </ul>
  </div>
</div>

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="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="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="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="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="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.

Dropdown

Footer