Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
|Primary button||The primary button is the preferred call-to-action button.|
|Secondary button||Secondary buttons are, secondary. They contain actions that are important, but not the primary action.|
|Text button||Text buttons are buttons for actions that is of minimum importance.|
|Info button||The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.|
Buttons communicate actions that users can take.
- Buttons should indicate that they can trigger an action.
- Buttons should be easy to find among other elements, including other buttons.
- A button's action and state should be clear.
Text labels describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does. Text labels should be short, concise and descriptive.
Buttons have a minimum width of
48px, and a maximum width of
A layout/view should contain a single primary button that makes it clear that other buttons have less importance in the hierarchy. This primary button commands the most attention.
An view can show more than one button in a layout at a time, so a primary button can be accompanied by secondary or text buttons that perform less important actions.
All buttons can have icons.
It is preferred that icons are placed to the left of the text. In some occasions, like with navigational buttons, you can place arrows to the right.
<button type="button" class="if button"> <span aria-hidden="true" class="if icon [product|symbol|ui] <iconName>"></span> Button with icon </button>
<button type="button" class="if button primary"> Button </button>
<button type="button" class="if button [secondary]"> Button </button>
<button type="button" class="if button text"> Button </button>
<button type="button" class="if button info"> Button </button>