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.
  • Provide voice command label to ease interaction.
  • If using multiple buttons, label them distinctly.
  • The size of the buttons should be used in proportion to the context and content around it.

Touch = UIs placed at 50cm (~20 Inch) from users

Buttons are bound to ergonomic requirements, do not scale them below 24mm. Scaling up beyond 60x60mm should foresee a full-hand push as common interaction.

Example Height (px or mm) Use Case
Small Primary Button 24px = 24mm Tertiary Actions (i.e. Close or More)
Default Primary Button 32px = 32mm Primary Actions, Modals
Large Primary Button 48px = 48mm Free Floating Actions