Buttons

• Usage
• Styles
• Accessibility

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.

Behaviors

All buttons (including icon buttons) should have the following states:

• Default
• Hover
• Pressed
• Disabled

Structural Progression States

Color Progression States

Auxiliary Button 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.

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).