Button
Buttons allow users to perform actions.
Usage
Buttons allow users to perform actions or trigger events. Use different button styles to convey hierarchy and importance within your experience. If using icons, ensure they enhance usability and are meaningful in context.
Variations
Buttons come in filled and outlined styles making it easier to create hierarchy and show emphasis.
Primary
The primary button communicates strong emphasis and is reserved for essential actions. Use the primary outline variant if extra emphasis is needed for more than one action in a single view. Avoid using more than 2 primary buttons in the same view.
Secondary
The secondary button is for medium emphasis and is used when the action requires less prominence, or if there is a primary action in the same view.
Ghost
The ghost button is for low emphasis. It’s usually paired with other button types for less prominent actions.
Icon
Icon buttons should be used sparingly when space is limited or for supplemental actions.
Best practices for label copy
• Always use verbs or verb phrases in sentence case
• Button labels should be concise (1-2 words is ideal, 5-6 words max)
• Avoid using punctuation
• The button should reflect what will happen once it is clicked
Button pairing
Use different button styles to convey hierarchy and importance within your experience.
Pairing with primary
Primary buttons paired with ghost buttons creates a clear hierarchy.
If extra emphasis is needed the secondary outline button can be paired with the primary CTA.
Pairing filled primary and secondary buttons can lead to confusion and creates a dense user interface.
Pairing with secondary
If less emphasis is needed, secondary buttons can be paired together to maintain a sense of hierarchy.
Pairing secondary outline buttons are ideal for tertiary actions.
Pairing filled secondary buttons can lead to confusion and creates a dense user interface.
Additional resources
Button component
