Skip to main content

Components (In-Field)

Components are the building blocks of the design system designed with users in mind.

Components (In-Field)

Components are the building blocks of the design system designed with users in mind.

In-Field

The in-field, high-contrast library is specific to applications used outdoors.

Accordions

The accordion element delivers large amounts of content in a small space through progressive disclosure.

Alarms

Alarms tell the user of a critical system problem.

Badges

Badges are non-interactive labels which hold small amounts of information.

Buttons

Buttons are interactive elements that trigger an action or an event.

Cards

Cards contain content and actions about a single subject.

Checkboxes

Checkboxes are used for a list of options where the user may select multiple options, including all or none.

Chips

Chips represent small blocks of information and are commonly used for input or filtering.

Dropdowns

Dropdowns present a list of options that can be used to filter or sort existing content.

Inputs

Input fields collect information from users.

Lists

Lists are made of list items. A list can be used to display content related to a single subject.

Messages

Messages provide the user with contextual static information. They have a lower priority than a notification or prompt.

Modals

Modal dialogs interrupt workflows and require user interaction.

Navbar

The navbar provides context through globally accessible menu options.

Notifications

Notifications provide unobtrusive, short-lasting, contextual feedback to the user.

Progress Bars

Progress indicators express an unspecified wait time or display the length of a process.

Prompts

Prompts inform the user about a decision they need to make or a system event they need to know about.

Radio Buttons

Radio buttons are used when options are mutually exclusive.

Scrollbars

Scrollbars indicates a user's location in a document that is larger than the viewing space.

Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a button.

Sliders

Sliders allow users to make selections from a range of values.

Spinners

Spinners indicate progress by showing users a loading state

Switches

Switches are used to toggle functionality.

Tables

Tables display information in a grid-like format of rows and columns.

Tabs

Tabs are used to quickly navigate between views within the same context.