Buttons
Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
Principles
Identifiable: Buttons should indicate that they can trigger an action.
Findable: Buttons should be easy to find among other elements, including other buttons.
Clear: A button’s action and state should be clear.
Usage
When to use
Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
When not to use
Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.
Types
Each button type has a particular function, and its design signals that function to the user. It is therefore very important that the different types are implemented consistently across products, so that they message the correct actions.
1. Filled button (high emphasis)
Filled buttons have more emphasis, as they use a color fill.
2. Outlined Button (medium emphasis)
Outlined buttons are used for more emphasis than text buttons due to the stroke.
3. Text button (low emphasis)
Text buttons are typically used for less important actions.
4. Icon button
Used when the icon is self-explanatory and there is no need for a label.
5. Toggle button
Toggle buttons group a set of actions using layout and spacing. They’re used less often than other button types.
Variants
Split button
The split button is a dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.
Split buttons reduce visual complexity by grouping similar commands together.
Design guidelines
Anatomy
1. Filled button
A. Text label
B. Container
C. Icon (optional)
2. Outlined button
A. Text label
B. Container
C. Icon (optional)
3. Text button
A. Text label
C. Icon (optional)
4. Icon button
C. Icon
5. Toggle button
B. Container
C. Icon
Text label
A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user interacts with it.
By default Material uses capitalized button text labels. This is to distinguish the text label from the surrounding text. Be sure to always use uppercase in button text labels.
Do not use lowercase text labels as the button may not be distinguishable from the surrounding elements.
Icon
If a text label is not used, an icon should be present to signify what the button does.
Progress indicator
After clicking a button, a process can be performed in the background that may require the user to wait for a few seconds before doing something else or trying another action. For these cases, we use a circular progress indicator inside the button instead of an icon or a text label.
Hierarchy
A single, prominent button
A layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.
Other buttons
An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium and low-emphasis buttons that perform less important actions.
If your layout requires multiple actions —as is the case with some toolbars, data lists and dashboards— low-emphasis buttons (text buttons) may be a better choice.
When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.
Emphasis
You don’t necessarily need to use the buttons in the order that their emphasis implies. For example, you don’t always need to use the outlined button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your UI. Keep these best practices in mind.
When using multiple buttons, indicate the most important action by using a primary variant (next to a secondary button).
When using multiple buttons, you can place an outlined button next to a filled button. In this case, the filled button is the most important action.
Placement
They are typically placed throughout your UI, in places like:
- Dialogs
- Forms
- Cards
- Toolbars
Buttons can be placed inside other elements such as cards and dialogs.
Buttons can be placed in table toolbars.
Alignment
Alignment refers to whether the buttons are aligned to the right or the left of a window, container, or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they’re contained within another component.
As a general rule, the primary button is located on the right side of the page. As in wizards, where the user advances through a series of steps or dialog windows, the primary action is traditionally located at the bottom right. Buttons within components such as in-page forms, side panels and data tables are also aligned to the right.
In some cases, buttons may span the entire width of a container. Typical expanded buttons locations could be:
- Dialogs
- Cards
- Side panels
| Alignment | Use case |
|---|---|
Right-justified |
Dialogs, cards, steppers, side panels, in-page forms, data tables, banners. |
Left-justified |
Cards, dialogs. |
Full-span |
Dialogs, side panels, cards. |
Aligned right
Left-aligned and full-span alignment must be previously evaluated according to the nature of the interface and the parent container where the button is placed.
Don’t place a button below another button if there is space to place them side by side.
Filled button
Filled buttons are high-emphasis, distinguished by their use of a contrasting background color. They contain actions that are primary to your app.
Container
Filled buttons display a contrasting background color.
Button container width can be set according to the responsive layout grid (e.g.: full-span buttons).
Icon
Filled buttons can place icons next to text labels to both clarify an action and call attention to a button.
States
States are visual representations used to communicate the status of a component.
Outlined button
Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Container
Outlined buttons display a stroke around a text label. Stroke can be represented in different ways:
- Set a button’s width to be the size of the text label, with padding on the left and right
- Set the button’s relative position to the responsive layout grid
Icon
Outlined buttons can place icons next to text labels to both clarify an action and call attention to a button.
Use an icon to emphasise the action the user can perform.
States
Outlined buttons can be placed on top of a variety of backgrounds. Its container is transparent and until the button is interacted with, a color isn’t visible.
Text button
Text buttons are typically used for less-pronounced actions, including those located:
- In dialogs
- In cards
In cards, text buttons help maintain an emphasis on card content.
Dialogs use text buttons because the absence of a container helps unify the action with the dialog text. Align text buttons to the right edge for LTR scripts.
Use a text button in snackbars and cards.
Text label
In this case, the text label is the most important, since it communicates what action is to be performed.
Text label using a distinct action.
In text buttons, text labels need to be distinct from other elements and must be fully capitalized. Also avoid labels that are too long.
Icon
Text buttons can use icons both to clarify an action and to draw attention to a button.
States
Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible.
Icon button
Icon buttons can be used when the icon is self-explanatory for the action and there is the need to optimize space.
Use an icon button when its intention is very clear. Also when there is not enough space to use a button with text for such simple actions.
States
Icon buttons that cannot be clicked should be either disabled or hidden.
Toggle button
Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons, a group should share a common container.
Selected action
Only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other.
Text label using a distinct action.
Icon
When using a toggle button, the icon represents the action that can be performed. Make sure that the icon correctly communicates the message to the user.
States
A toggle button’s state makes it clear which button is active. Hover and focus states express the available selection options for buttons in a toggle group.
Toggle buttons that cannot be selected should be either disabled or hidden.
Specs
Filled
Outlined
Text
Toggle
Icon
Split