Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Do not use two icons at the same time.

Writing labels

Do

Button labels use sentence case (Capitalize the first letter, use lowercase for everything else) and are as short as possible

Don’t

Use label while clearly explaining what happens when the button is activated.

The button text should be actionable so users know exactly what to expect when clicking.

Do

Button labels are as short as possible, while clearly explaining what happens when the button is activated.

Don’t

For maximum legibility, a text label should remain on a single line. Find another label if you can’t do it !

...

Combining button styles

Do

When using multiple buttons, you can place an outlined primary button next to a primary button.

Don’t

...

Do

If you really need to use two similar buttons you can use secondary buttons.

...

Use several primary buttons it will loose emphasis.

Stretched buttons on mobile

Do

Keep mobile margin with stretched button on mobile.

Don’t

Use full screen with stretched button on mobile.

Alignment

Button alignment by default should be start-aligned. However, buttons can appear center-aligned or end-aligned if required. Alignment depends on regional specific text direction.

...

Disabled/inactive Buttons

...