Vivid API

Fab

Floating Action Button (FAB) is an action button that floats above the user interface and should be used for actions that stands out among the rest of the UI.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

Icon-Only Buttons

  • Always provide an aria-label for buttons that contain only an icon.
  • The label is announced by screen readers and communicates the button’s purpose.

Best Practices

Avoid Disabling Buttons

  • Disabled buttons cannot receive focus and don’t explain why they can’t be used.
  • Instead, consider keeping the button active and use validation or error messages to guide the user.
  • Don’t Use Tooltips on Disabled Buttons. Tooltips are not reliably available across devices or assistive technologies.

Resources