Button

Complete an action

Icon

The button can contain an icon but its use is regulated.

  • The icon must illustrate the action: use text without an icon if none of the icons in the library correspond to the action on the button.
  • A button must always contain a text label, unless there isn't enough space. If you don’t have the space, you need to add text label. Don't forget to fill in the icon's “alt” field with it.
  • The button can contain a counter with text and without text to indicate, for example, on a download button the number of items to be downloaded.
Button icon preview

Text

 

Do/Don't

DO

DON'T

Use sentence-case capitalization.

Use sentence-case capitalization.

Use all caps or capitalization.

Use all caps or capitalization.

 

 

DO

DON'T

Use terms related to the action requested to the user.

Use terms related to the action requested to the user.

Use vague terms that don't allow the action to be contextualized.

Use vague terms that don't allow the action to be contextualized.