Buttons are used to take on-screen actions like add, save, delete or sign up. Text-links and buttons have different purposes: where text-links usually navigate the user to another page, buttons interact with elements and data on the current page. Setting filters, submitting forms, expanding images or starting a search are all typical on-screen actions of buttons.
All buttons in the Daimler design system provide rich visual feedback when clicked, selected or tapped.
Buttons should be used in a visual hierarchy to guide user interaction towards the main call to action. The most important action is visualised as a primary button. Ideally there is only one primary action visible at the same time. Other actions like cancel or go back can be shown as secondary or tertiary button styles.
- Primary - reserved for the main call to action on the page.
- Secondary - for secondary actions on the page.
- Tertiary - buttons used for less prominent actions or paired with primary and secondary ones.
- Icon button - in rare cases, an icon without a text label can also be used as a button. This style option should only be used if the action is clearly unimportant and should not distract from other content. Examples are expanding an image or showing legal information in the website header.
A button can represent five different visual states: enabled, disabled, hover, focused and pressed.
- Enabled: the default state of a button.
- Disabled: in this state, the button is not clickable by the user. This usually happens if a form is not completely filled out prior to submission.
- Hover: the hover state signals interactivity when a user has placed the mouse cursor on an interactive element.
- Focused: the focus state highlights an element when keyboard navigation is used. This type of navigation is especially important in accessibility and for screen readers.
- Pressed: a pressed state occurs on tap or click event.
The text label is the most important element on a button, as it communicates its purpose. This text can also be followed by or replaced by an icon, as long as the message is clear.
By default, labels in the Daimler universe are center-aligned, set in sentence case and feature a high color contrast (white over dark buttons and black over white or grey buttons).