Float Action Button

A float action button enables the user to perform an action with a single click.

General guidelines

The float action button is a variant of the primary button. Use this type of button when it is the most suitable way to present the primary action.

A float action button sticks in an area of the screen real estate and remains in view as users scroll through the content.

Best practices
  • Keep the amount of float action buttons to one maximum.
  • The float action button should always be put at the bottom right of the screen to ensure that it doesn’t disrupt the content.
  • If the float action button has an icon, always position it on the left as, when scanning the item (from left to right), users can grasp the type of button it is at a glance.
  • Opt for labels that are as short as possible using a strong verb describing the resulting action.
  • Avoid writing more than three words in a button.
  • Respect the nomenclature of the label (lower case starting with a capital letter).
  • An icon can be placed to support the label, this usage is only recommended when the icon is fairly understandable and/or the usage is fairly explicit (e.g.: settings button)
Visual guidelines


Each type of button has 4 states: default, hover, focus and disable.

Always use the disable state when the button is not clickable.

White versions are available when the buttons are used on dark backgrounds or images and the necessary contrast for readability is lacking.



Several sizes are available, use them wisely depending on the action priority and your targeted device size.

Big sizes will better suit mobile devices usage but can be used on desktop landing pages as well.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top