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.
Sizing
States
States for Buttons in Mobile are:
- Default
- Pressed/Active
- Disabled
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.
Placement
FABs can attach to top or bottom of app bars and the edge of some components.
Was this page helpful?
Thanks for your feedback!