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 button container. Icons are optional.
  • Make buttons look and feel clickable.
  • If using multiple buttons, label them distinctly.
  • The size of the buttons should be used in proportion to the context and content around it.
Type Example Height Use
Small

48dp In-page
Default

56dp Landscape Footer
Large

64dp Landscape Footer
Floating

56dp Segmented Controls
Floating Large

64dp Floating Screen
Stacked

80dp Portrait

Note: All items spacing is 8dp, the stacked buttom is 4dp. Incab sizes only, see mobile for smaller options for in-field if required

Behaviors

All buttons (including icon buttons) should have the following states:

  • Default
  • Hover
  • Pressed
  • Disabled

Color Mix States

State Primary Secondary Outline Text Only
Default

Pressed

Focus

Disabled

Note: Focus state uses Highlight Blue for high contrast.

Ancillary Button States

State Background Line Below
Default

Pressed

Focus

Disabled

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.

OEM Branding

  • Primary and secondary buttons may be branded for OEM colors.
  • Primary button should be one of the brand colors and needs to be clearly visible in the cab under variable light conditions. Make sure it meets color contrast accessibility standards.
  • Secondary button should be restricted to a tone of gray.

OEM branding

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.

Last updated July 16, 2024.