Buttons

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	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

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.

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.

View on GitHub