Characteristic tokens

Components which can or should be emphasized against others in close proximity.

Components with the ability to action something, action is performed immediately (the component doesn’t stay selected).

Group of components used to contain and separate different types of content and allow hierarchical organization.

Components that can be grabbed and moved to a target area (related to Target).

Components that hold mutable data and allow for data entry.

Components that allow a user to navigate across UI sections or data sets and change view context.

Components that may form a hierarchy and stack upon or beneath other elements of the UI.

Group of components that allow single or multiple selection, Selection can trigger actions.

Group of attributes to separate information/elements. Connected to Container. Level 1 - used when subtle division is needed/to divide similar items e.g. options within a list, individual comments. Level 2 - used to divide related areas e.g. heading and body text. Level 3 - used to separate areas of content that are not closely related e.g. app header from main content

Components which have attributes that denote status and the severity of that status.

Components which indicate a target area where a draggable item can be dropped (related to Draggable).

All text examples are shown using the default fontWeight token.

Components which have the ability to visually indicate progress, scale, or range along a defined track.