Component overview

Introduction

Buttons are clickable elements that are used to perform an action. Button contains a text label and a supporting icon can be displayed.

The label describes the action that will occur if a user interacts with it.

Anatomy

Buttons can contain a combination of a clear label and an icon while links are always text. Button is always displayed as an icon.

States

Buttons have four states that define their appearance:

Default, Hover, Focus and Disabled.

When you add a button to your interface, initially it is in the default state, which means the button is enabled and the user is not interacting with it.

Variants

Primary

The primary button should only be used once per view (not including a modal dialog), these buttons have the most emphasis.

It should never be doubled up to sit side by side. It is used when an action is clearly more important than the other actions and you need to draw attention to it.

Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance.

primary.large.text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

primary.large.icon+text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

primary.large.icon.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

primary.small.text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

primary.small.icon+text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

primary.small.icon.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

Secondary

The secondary button is the standard button for most use cases. The outlined styling places less emphasis on these buttons.

secondary.large.text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

secondary.large.icon+text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

secondary.large.icon

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

secondary.small.text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

secondary.small.icon+text.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

secondary.small.icon.

	Default (State)
	Hover (State)
	Focus (State)
	Disabled (State)

Primary reversed

The primary reversed should be used for primary actions on pictures or dark backgrounds.