Buttons communicate an action to happen on user interaction.
- Icon: Used to give the button clarity and more meaning.
- Label: Text that indicates the result of selecting the button.
Color plays a big role in how buttons are displayed in layouts. See the colors page to learn more about color definitions.
The primary button is always used for the most important actions. Two primary actions can't be near each other.
The default button is always use for default actions. Several default actions can be near by each other.
The subtle button is most cases used for actions that don't require to draw attention. It can be used paired together with the primary button and act as a "Cancel" button.
The link button used to navigate to another page, section of a page or to open extra context within the page.
Warning buttons are used before the user is about to make a significant change.
Delete buttons are used in order for the user to finalize and confirm permanent deletion of critical information. They are used mostly in the context of a modal.
- Use the same height for all the buttons that are in the same row.
- Text can not wrap multiple lines. It must all be on one line.
- A borderless button must be placed either before or after a set of bordered buttons.
Block level button
Buttons can also be configured at block level. Use this configuration when you need to communicate that an important action is required for the user. For example, it can be used as a load more action below a list. Please do not use it in forms. Choose the button type carefully. Primary is not always the best choice, nor is it the only configuration.
Dropdown buttons are always used with a dropdown menu. This button variation can be secondary or borderless type.
- Label: Use a label that will relate to the list it provides.
- Arrow: Arrow icon indicates there's a list for this button.
See the dropdowns page to learn more about dropdowns components.
Split buttons are used when you need to offer the user a quick main action along with secondary actions.
- Button: Use a button that allows the user to do a quick action.
- Dropdown: Provide a dropdown next to the button to give the user additional options.
Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.
- Unselected Provide unselected states for the button if the user is not on that page.
- Selected: When the user selects this page provide an active state to provide clarity of which page they are viewing.