Checkbox button

Dimensions

 

States

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

1. Enabled
   A checkbox button is in the enabled state when the user’s cursor is not hovering over it, and the button isn’t disabled.
2. Hover
   A checkbox button is in the hover state when the user's cursor is on the button, but they haven't clicked on it yet.
3. Active
   The checkbox button is in the active state once it has been clicked.
4. Loading
   The checkbox button is in the loading state when an action is in progress. All our current buttons support the loading 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.
5. Disabled
   The checkbox button is in the disabled state when its action is blocked by something that needs to be completed first. Add an explanatory tooltip to inform the user why the button is disabled.
   
   The on-hover cursor type will be in ’not-allowed state’ to indicate that the requested action will not be executed.
6. Selected
   It's possible to select multiple checkbox buttons at a time. Once the user chooses another item, the previous choice is stay selected.

 

Typography

The button text is written in sentence case: only the first word in a phrase is capitalized unless there are proper names or exceptions. For exceptions see the terminology list.