Link to Fluid's Microsoft Teams channel Link to the support page

Floating Action Button

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

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

angular logo

To do

react logo Reactopen_in_new
javascript logo Vanillaopen_in_new
angular logo Figmaopen_in_new

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.

Dropdown

Footer