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> with the version 3.1 or higher and only in Angular, React or VueJs frameworks.
If you are using an older version or any JavaScript frameworks, do not use this tag and keep only the HTML inside.

<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>