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">
  <i class="material-icons ">add</i>
</button>

Disable state

Add the .disabled class on the tag.

<button type="button" class="nj-fab disabled">
  <i class="material-icons">add</i>
</button>

Size variation

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

<button type="button" class="nj-fab nj-fab--sm">
  <i class="material-icons ">add</i>
</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">
      <i class="material-icons ">add</i>
    </button>
    <ul class="nj-fab__actions">
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">attachment</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">add_a_photo</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">cloud_upload</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">create_new_folder</i>
        </button>
      </li>
    </ul>
  </div>
  <div class="nj-fab-menu" data-placement="right">
    <button type="button" class="nj-fab">
      <i class="material-icons ">add</i>
    </button>
    <ul class="nj-fab__actions">
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">attachment</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">add_a_photo</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">cloud_upload</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">create_new_folder</i>
        </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 style="display: flex; flex-direction: column;">
  <div class="nj-fab-menu" data-placement="right">
    <button type="button" class="nj-fab nj-fab--sm">
      <i class="material-icons ">add</i>
    </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">
          <i class="material-icons">attachment</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">add_a_photo</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">cloud_upload</i>
        </button>
      </li>
      <li class="nj-fab__item">
        <button type="button" class="nj-fab nj-fab--light nj-fab--sm">
          <i class="material-icons">create_new_folder</i>
        </button>
      </li>
    </ul>
  </div>
</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