Button

Last edit: 2023.08.07

The TomTom Digital Cockpit SDK is not available for general use.
Please contact us for more information.

Button is a graphical control element that gives users a simple way to trigger an event, like search queries on a search engine or interacting with dialog boxes (for example, confirming an action).

The control appears as a recognizable, clickable element, similar to a physical button. It is typically placed throughout our UI, in places like panels or overlays.

Anatomy

anatomy
  1. Container: The background of the Button. It includes a background color, stroke width and style, radius, and elevation properties.
  2. Content: Icon and/or label.

The Button supports the following configurations:

anatomy configurations

Types

anatomy types
Button typesAbout
Primary buttonUsed for actions with the most emphasis when a clear "call to action" is needed on a screen, or when from a range of commands one is predominantly used.
Secondary buttonUsed for actions with less emphasis. These are the most commonly used buttons as they are visually clickable but do not distract from the content.
Tertiary buttonUsed for actions with the least emphasis.
Floating buttonUsed for actions that can hover over the content.
Destruction buttonUsed for actions with a negative emphasis that results in data loss.
Acceptance buttonUsed for actions with a positive emphasis that results in success.
Toggle buttonUsed for actions that allow users to switch between two or more states or options.

States

The Button supports multiple states to indicate its status:

anatomy states
Button statesUse
NormalThe default state of the Button.
DisabledA state when the Button is not active for connection or input reasons.
PressedA state when a user taps on the Button. The Button animates (dims and shrinks) to provide feedback.
ActivatedA state when an action is activated. Most commonly used in the toggle Button to switch between normal and activate/selected states.
BadgeA state that indicates a status, notification or event. The Button shows a small UI item called a badge on top of the icon.

Usage

usage example1 thumbnail

Bluetooth pairing flow modal

Primary button "Confirm", secondary button "Cancel", tertiary button "x" to close modal.

usage example2 thumbnail

Incoming call notification

Destructive button "Decline call", acceptance button "Accept call".

Customization

TypeCustomizable
ThemingThe sizing of the container, text, margins, paddings, and icons can be adjusted. Additionally, it is possible to change the styling of the container (background and elevation), text and icon.
ConfigurationsDifferent combinations of label and icon are supported.
ContentThe labels can be changed and icons can be replaced (unless they are non-customizable map assets or coming from a third-party service).