Floating Action Button

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

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.

Use only the tag <nj-fab-menu></nj-fab-menu> if you choose the Web Component initialization method with Angular, React or VueJs frameworks.

<nj-fab-menu>
  <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>
</nj-fab-menu>
<nj-fab-menu>
  <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>
</nj-fab-menu>