Sizes

There are several sizes of buttons. As with button types and variations, consider the context of the situation when selecting the appropriate size.

1. Large - Use the large button for essential actions in a spacious interface.
2. Medium - Use the medium button for most cases. This is the default size of our buttons.
3. Small - Use the small button only in cases where there is a lack of space in the interface or when the button’s action is secondary to the page content.

States

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

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