Button group

Dimensions

 

States

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

1. Default
   A button is in the default state when the user’s cursor is not hovering over it, and the button isn’t disabled.
2. Hover
   A 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 button is in the active state once it has been clicked.
4. Disabled
   The button is in the disabled state when its action is blocked by something that needs to be completed first, for example, changing a field value or waiting for system response.
   
   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.
5. Loading
   The 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.

 

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.