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 |
|
|
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.
Was this page helpful?
Thanks for your feedback!