Primary buttons are used highlight the strongest call to action on a page and are visually most prominent. They are most effective when they appear only once. Not every screen requires a primary button.
The default button size for primary buttons, it is used whenever a call to action is required in the design.
See all states usage
Secondary buttons are less prominent calls to action, and are usually there to support the primary button. It gives the user an alternative option, and therefore ensures there is flexibility in the design.
The default button size for secondary buttons; it is used whenever an alternative call to action is required in the design.
See all states usage
Tertiary buttons are the third options for button styles and are often used for less consequential actions on the page like 'Close'.
The default button size for tertiary buttons, it is used whenever a minor call to action is required in the design.
See all states usage
Link buttons indicate the clicking will lead to an external source.
The default size for links, it is used whenever it is required in the design.
See all states usage
Buttons with icons help visually indicate the action to be taken, in addition to its label.
See all states usage
Buttons are fundamental elements in user interfaces, serving as interactive components that facilitate user actions and engagement.
Buttons typically have a label and can include an icon before or after the label.
Text describing the button action. Use action verbs or phrases to tell the user what will happen next, and follow the button label content guidelines.
The selectable area of the button.
Most buttons don’t need an icon. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
Buttons can have different states depending on their use case and the actions they inspire
Most prominent and visually emphasized button.
Important but less visually prominent button
Least consequential and visually subtlest button
Text button that indicates clicking will lead to an external source or a different area within the product
Some basic guidelines to ensure your button usage is coherent and does not break the flow of the design
Only capitalize the first letter of the button and any proper nouns. Most feature names aren't capitalized or considered proper nouns when following our capitalization guidance.
Keep your button labels clear and concise to help the user better identify the action. The label should aptly describe the outcome of clicking it.
Avoid having too many buttons in a single page. Upto one primary button, and four to five secondary buttons can be considered for the product.
Align buttons to text and form fields on the right side to establish a visual flow for the user.
Don't scatter buttons around the design. Logically grouping your buttons together can help reduce the cognitive load on your users.