A button is a clickable element used to perform an action. It contains a text label and a supporting icon can be displayed.
Overview
Introduction
Buttons are clickable elements that are used to act. They contain 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.
States
Buttons have five 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) |