Buttons

Buttons are interactive elements that trigger an action or an event.

Specifications

  • All buttons should be interactive and perform an action.
  • They should be discoverable, easy to identify, and specific.
  • Always have a text label within the button container. Icons are optional.
  • Make buttons look and feel clickable.
  • If using multiple buttons, label them distinctly.
  • The size of the buttons should be used in proportion to the context and content around it.

There are four sizes of buttons: xsmall, small, default and large. Corner radius is 4px.

Button Specifications

Sizing

Buttons Sizes

States

States for Buttons in Mobile are:

  • Default
  • Pressed/Active
  • Disabled

Button States

Floating Action Buttons

Floating action buttons (FABs) are used for the primary or most common, action on a screen. They appear at the highest level “floating” above screen content thus they include a dropshadow to evoke a sense of depth. Circular & pill shapes are often used for these buttons. Recommended sizes are 56px and 48px. Secondary color may also be used if necessary.

Floating Action Button

Placement

FABs can attach to top or bottom of app bars and the edge of some components.

Floating Action Button Placement