- 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.
All buttons (including icon buttons) should have the following states:
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.
- 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!