Skip to main content

Buttons

Buttons are interactive elements that trigger an action or an event.

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.
Example Use Case
Small Tables
Default Action Bars
Large Modals

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

State Primary Primary Outline Secondary Outline Text Primary
Default
Hover
Active
Disabled

Color Progression States

State Primary Secondary Tertiary Text Primary
Default
Hover
Active
Disabled

Danger Button States

State Danger
Default
Hover
Active
Disabled

Special Button

State Danger
Default
Hover
Active
Disabled

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
Hover
Active
Processing request Processing

Processing

Processing
Disabled

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
State Primary Secondary* Tertiary Reversed
Default
Hover
Active
Disabled

Icon Button States (Solid and Outline)

State Primary Secondary* Tertiary Primary Outline Secondary Outline*
Default
Hover
Active
Disabled

* 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).
Last updated September 19, 2024.