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.
Sizing
There are four sizes of buttons: xsmall, small, default and large. Corner radius is 4px.
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.
Editorial
- All buttons in the Modus Design System employ sentence case.
- Label a button with a verb, like “Copy”, or verb-phrase, like “Copy document.”
- Strive for short button labels that clearly describe an action.
- Try to limit button labels to three words or less. Using one or two words, if possible, is ideal.
- When writing buttons, you can remove most prepositions and articles (e.g. a, an, the).
- If a question is asked in a modal, use button labels that match the question. Keep in mind the following guidelines as well:
- Don’t use OK/Cancel to answer yes or no questions.
- Make sure you keep “your” and “my” consistent.
- Avoid saying “click” when referring to buttons (and other UI elements).