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