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