- 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.
Note: All items spacing is 8dp, the stacked buttom is 4dp. Incab sizes only, see mobile for smaller options for in-field if required
All buttons (including icon buttons) should have the following states:
Note: Focus state uses Highlight Blue for high contrast.
- 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.