Button

Buttons initiate actions and indicate what will happen after interacting with them.

Buttons are one of the most crucial elements of a user interface. They are used to initiate actions and indicate what will happen after interacting with them. They can have varying looks basis on the prominence.

Buttons come in a lot of styles basis on the intent and prominence.

Basic button is the simplest and the default style of the button. It is used the most across products. It provides a lightweight button style while still maintaining affordability. Use other styles if less or more visual weight is required.

Primary button is used to draw attention towards the primary action on a page. It is recommended to have just a single instance of primary button per page. If you think more than one primary action is needed, try to re-evaluate the priority of actions.

Alert button indicates destructive actions that cannot be undone typically such as delete, discard, etc.

Transparent button indicates actions that are less important or less frequent.

Expanded button is used when the width of the button needs to match the parent. Use it sparingly as it takes a lot of space and attention.

Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it.

Icon button only uses icons to indicate what the action would be. They come handy when there is a space constraint and the icon meaning is universal i.e. easy to understand such as print, edit, delete, etc.

It is recommended to show tooltip on hover so as to provide clarity on what the action would be.

Buttons come in 4 appearances basis on their intent - basic, primary, alert and transparent. The only exception is the expanded button which does not support the ‘transparent’ appearance.

Buttons come in 3 sizes - small, regular and large.

Buttons come in 6 states - default, hover, active, focus, disabled and loading. Buttons with basic and transparent appearance come with an additional selected state to mimic toggle behavior.

Buttons come with a loading state which can be used to indicate that the action clicked is in progress.

Always use tooltip with icon buttons. It provides an additional way to indicate the meaning of the button. Keep the tooltip label concise.

Show tooltip on an icon button

Basic and icon buttons can be combined to create a split button. The split button provides a way to attach multiple options to an action. The spacing between the two buttons is 2px.

As mentioned earlier, in addition to the common 6 states, basic and transparent appearances also supports an additional selected state which can be used to mimic toggle behavior.

Bold icon button in selected state

Multiple buttons of same type can be grouped in proximity to indicate related actions.

Basic button group

Icon button group