- Label: Describes the action of the button.
- Container: Frame containing the button.
- Background: White space behind the button.
Variants
The button has four variants: primary, secondary, destructive, and positive.
Use different button variants and types to guide the user through your design or help express the hierarchy of actions. Choose the appropriate button style based on the importance and context of each action. Be sure to consider the button type and configuration for each action.
Primary
Use style to visually distinguish between primary and secondary actions. To highlight the preferred or most likely action, assign a more prominent style to the primary button and a less prominent style to the secondary button or other alternative actions. A primary button is designed to capture the user's attention and stand out from other buttons. Therefore, it's recommended to use only one primary button per screen in a workflow to maintain clarity and focus.
Secondary
A secondary button is outlined, featuring a stroke around the button container and, by default, has no fill. Use the secondary variant when the action is supplemental to completing a workflow. The secondary variant is the default for button. The secondary variant has a recognizable appearance with a style that keeps it from standing out in the display. More than one secondary action can be used as needed in a workflow.
Destructive
Use the destructive variant for critical or irreversible actions, such as permanently deleting something. The destructive button’s style clearly communicates the seriousness of the action, signaling the potential negative consequences.
Positive
Use the positive variant for confirming an action or approving an object. However, the positive variant should never stand alone—always pair it with an alternative action that does not use a positive color, ensuring users have a clear distinction between the two options.
Configuration
Choose between one button, two buttons, or three buttons based on the number of actions to be performed. Each button can have one of four variants: Primary, Secondary, Destructive, and Positive. Using different button variants and types can guide the user through your design or workflow, while also expressing the hierarchy of actions with distinct styles. Be sure to select the appropriate button style based on the importance of each action, and consider the button type and configuration for each action.
One button
A one button is ideal for situations where there is a single primary action, such as "Submit" or "Confirm." It minimizes confusion and directs the user's attention clearly. You can assign one of the four variants—Primary, Secondary, Destructive, or Positive—based on the action's significance.
Two buttons
Two buttons work well when offering two related actions, like "Save" and "Cancel." It's crucial to choose the variants wisely to guide the user effectively; using two Primary buttons is not recommended, as it can create confusion. Instead, pair a Primary button with a Secondary button to clearly indicate the main choice while still providing an alternative.
Three buttons
Three buttons are best for scenarios where users have three distinct actions, such as "Edit," "Delete," and "View." This configuration allows for comprehensive choices while maintaining clarity. Careful selection of variants is essential—using multiple Primary buttons is not advisable. Instead, assign different variants to emphasize the hierarchy and significance of each action in the workflow.
Keep button labels short and focused on the action. Ensure the text clearly communicates the intended action.
Avoid overly long text on buttons. If the text is too long, avoid breaking it into two lines—shorten the label to fit, and only truncate the text as a last resort. Keep the text on a single line, using sentence case with only the first word capitalized. When the action is too long to shorten the text, consider using a single wider button to accommodate more text.
- Display one primary button per workflow
Use one primary button per display in a workflow.
Don’t use multiple primary buttons on a single display in a workflow, as it can confuse the user and dilute the intended action.
- Only use one footer action with 2-3 buttons max. Don't stack footer actions.
Use a single footer action and choose between one to three buttons for clarity.
Don’t configure two footers. Limit action options to a maximum of three distinct choices and present them in one line footer.
- Always place the primary button to the right of secondary buttons.
Primary button should be positioned on the right and the Secondary on the left.
Don't place the primary on the left of the secondary.
Alignment and positioning
Footer buttons should always be attached to the footer. The footer is sticky to the bottom of the screen during scrolling and, therefore, may hide part of the content at the bottom of the screen.
UI text guidelines
The default configuration for a button is plain text within a container, which can have different styles based on the variant you choose. Text buttons can clearly communicate all available actions in a display.
Consider these recommendations for labeling a button:
- Start with a verb to describe a specific action. This sets the expectation of what happens next.
- Use short labels. Two words is ideal. Three is OK. If needed for clarity, four is acceptable.
- Avoid commas, periods, and other punctuation
- Capitalizing only the first word.
- Add an object to the verb if additional context or clarity is needed
- For example, “Add table"
- Add an article (like “a” or “an”) to add a more human, conversational tone
- For example, “Add a person”
- Use the same verb tense if there are multiple buttons
- For example, two buttons could be “Apply” and “Close,” both of which are present tense
Responsive behaviors
The button container width can be adjusted based on the responsive layout grid.
