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.

React

Angular coming soon

Example

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

Theme colors

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

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

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

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

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

Disable state

Add the .disabled class on the tag.

<button type="button" class="nj-fab nj-fab--primary 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--primary nj-fab--sm">
  <i class="material-icons">add</i>
</button>

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

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

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

<button type="button" class="nj-fab nj-fab--light 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.

<!-- Top by default -->
<div class="nj-fab-menu mb-2">
  <button type="button" class="nj-fab nj-fab--primary">
    <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>

<!-- Right with : data-placement="right" -->
<div class="nj-fab-menu" data-placement="right">
  <button type="button" class="nj-fab nj-fab--primary">
    <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>

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