Color

Design variables

Enabled state

Hover state

Active state

Toggletip popover

States

The checkbox allows various states: unselected, selected, and indeterminate. In addition to these states, checkboxes also have a separate state for focus and disability. The default view of a checkbox set is with no option selected.

 

States are visual representations used to communicate the status of a button as an interactive element.

 

1. Enabled
   The enabled state of a button is when the user’s cursor is not hovering over it, and the button isn’t disabled.
2. Hover
   When the user's cursor is on a button, it is in a hover state, but they haven't clicked it yet.
3. Focus
   A button is in the focus state when the user targets it via the keyboard.
4. Active / isSelected
   The button is in a Pressed state after it has been clicked. In case the click to button opens a popover related to it, the button is in the selected state.
5. Loading
   When an action is running, the button is in a loading state. All the current buttons support this state, and the width does not need to be changed. The on-hover cursor type will be set to ‘in progress’ to indicate that the action is being completed.
6. Disabled
   The button is Disabled when its action is blocked by something that needs to be completed first, like changing a field value or waiting for a system response. Its opacity is 50%. Add an explanatory tooltip to inform the user why the button is disabled. The on-hover cursor type will be in the ’not-allowed state’ to indicate that the requested action will not be executed.
7. Applied
   The button is in the applied state if there is a need to indicate a completed action based on a user's input. E.g., Applied filters or applied labels.

Typography

Segmented control text is written in sentence case. Only the first word of each segmented control button is capitalized unless it includes a proper name or a word we capitalize (see Terminology and vocabulary).