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.
Example | Height | Use Case | |
---|---|---|---|
Small | 24px | Tables | |
Default | 32px | Action Bars | |
Large | 48px | Modals |
Behaviors
All buttons (including icon buttons) should have the following states:
- Default
- Hover
- Pressed
- Disabled
Structural Progression States
State | Primary | |||
---|---|---|---|---|
Default | ||||
Hover | ||||
Pressed | ||||
Disabled |
Color Progression States
State | Primary | |||
---|---|---|---|---|
Default | ||||
Hover | ||||
Pressed | ||||
Disabled |
Auxiliary Button States
State | Icon Only | Danger |
---|---|---|
Default | ||
Hover | ||
Pressed | ||
Disabled |
Icon button state colors may vary based on product. Always make sure the colors of all states (except for disabled) meet color contrast accessibility standards.
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).
Was this page helpful?
Thanks for your feedback!