Buttons

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 text button container. Icons are optional.
• When using icon buttons, make sure the symbol is comprehensive and scalable. A text tooltip can provide the name of the functionality.
• The use of secondary icon buttons (gray or white) as default is recommended over the use of primary blue.
• An icon can be used in combination with a dropdown caret in an icon button.
• Make buttons look and feel clickable.
• If using multiple buttons, label them distinctly.
• The size of the text 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
• Focus
• Active (Pressed)
• Disabled

A critical action button has an additional “loading” state when the hover color gradually takes over the button background upon click and hold.

Structural Progression States

Color Progression States

Danger Button States

Critical Action Button States

When the user clicks and holds the critical action button, the button state changes from default to pressed with hover background color gradually moving from left to right over the button to signal the passage of the required amount of time for the action to take effect. The process resembles a progress bar.

The recommended amount of time is five seconds and/or should be sufficient to re-read the button label twice. The button label remains unaffected during this process. Once the hover background color completely fills the button background, the desired action is completed. Upon completion of a critical action, a confirmation of the action may be necessary in some use cases (e.g. use a Toast). In some use cases, such as a destructive action, if the action can no longer be repeated, the button should revert to a disabled state.

State	Primary	Dark Outline	Danger
Default	Button	Button	Button
Hover	Button	Button	Button
Active	Button	Button	Button
Processing request
Disabled	Button	Button	Button

Icon-Only Button States

There are three types of icon-only buttons:

• Icon-only buttons with no fill and no outline.
• Solid button
• Outline button

Icon-only buttons (no fill, no outline) are recommended:

Icon Button States (Solid and Outline)

* Secondary icon buttons are recommended as default option.

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.

Disabled Buttons

The use of disabled buttons is highly discouraged. There are a few acceptable uses:

• When an option is unavailable, such as an item or product.
• The button has been clicked, and the system is processing the initial request. The button can be disabled to prevent the user from trying to submit a duplicate request and hitting the server multiple times.
• When a user is editing a form, but the application has not detected any changes made by the user.

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