Clickable elements used to perform actions.
The Button (commonly referred to as call-to-actions or CTA) component enables users to perform actions within the page, such as submitting form data or activating sharing utilities. Buttons are also offered in many styles to provide a visual hierarchy of intended use.
Colored surface used as backdrop for the Label and Icon (optional) messaging.
Succinct text that supports a contextual messaging. Text color should match the Icon color and should coordinate with the Background hue.
Visual support for Label messaging. Most commonly used position. Should not be used in conjunction with Icon / Right.
Visual support for Label messaging. Typically used a directional indicator. Should not be used in conjunction with Icon / Left.
Component details and standards such as spacing, sizing, and color.
There are two button sizes, Large and Small. Almost always, the Large size should be used. Tertiary buttons should mostly be used in the Small size, and Tertiary may not be used at the Large size.
The height of the component will be fixed at 48px/pts. Large buttons can optional be full-width and take up 100% of the container’s width.
Most commonly used for mobile, full-width buttons may only use the Primary & Tertiary styles. They can’t be in a container over 480px wide and can’t be smaller than 300px. They also should only be used on white backgrounds. Padding is set to 24px around the button
The height of the component will be fixed at 32px/pts. Small buttons should not span 100% width of the viewport and will always hug the contents of the component.
Text should follow the Title size 6 that translates to 16px bold. Icons should apply the Small size.
Buttons are offered in four variations: Primary, Secondary, Tertiary and Caution. Each variation includes a set color scheme that provides the appropriate emphasis based on the intended use case.
Use the Primary variation to build the strongest emphasis for CTAs.
Secondary CTAs should be used as an alternative to a Primary variation when dialing back the need to call the user’s attention.
These actions can both live in independent of and can also be paired with a Primary CTA.
When three actions are used in the same space, the tertiary should be used in the last position to pull back the visual attraction given to the Primary and Secondary CTA.
In certain circumstances, the Tertiary variation can be used independently of the Primary and Secondary, but these instances should be used sparingly.
The Caution variation should be used to signal to the user that their action can potentially lead to a dangerous or destructive circumstance.
The positioning of this action should be determined by the how destructive this moment could be the UX.
Most commonly these buttons may only be used on top of a “Base Color” such as blue or indigo or on top of a photo. Solid CTAs can also be used to reduce the visual weight introduced but other button variations.
Below is a list of examples of how CTAs should/shouldn’t be used through visual representations of our Do’s and Dont’s.
Place the Primary CTA in the top position when buttons are stacked vertically.
Place the Primary CTA under any other CTA option.
Use iconography provided by Thumbprint for the left / right icons.
Do not use external images, iconography, or emojis.
Use icons intentionally and responsibly. Icons should provide immediate and relative support to the experience.
Use iconography that can be misleading or does not provide additional context.
Use the spacing and sizing provided by the component.
Make sizing adjustments for buttons to fit particular circumstances.
Use colors provided by the variant options determined by the button theme.
Adjust CTA colors to fit a particular context.
Be sure text has a contrast ratio of at least 4.5:1 for small text and at least - 3:1 for large text (WCAG 2.0 1.4.3).
Color should not be used exclusively to convey information.
Text sizes should be scalable.
Buttons should be accessible via keyboard interactions.
Image-only buttons and links need alt-text.
Use buttons for primary actions and links for navigation.
Buttons should be 4 words or less.
Write in sentence case, except for proper nouns (like the Thumbtack Guarantee).
Do not use punctuation.
Provide alt text for image-only buttons.
Learn more about writing for buttons, CTAs, and links in Surfaces and Elements.
- Consistent spacing between buttons.
- Color and style variations for anchor links.
- Buttons providing easy access to important actions.
- Compact controls that allow for toggling and filtering.