Thumbprint logo

Components

Button

Clickable elements used to perform actions.

Usage

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.

When to use
Perform actions such as form submissions
Trigger popup or modal user interface elements
Change other UI elements such as closing overlays
When not to use
As links that change the url

Anatomy

Anatomy of the button component

  • 1

    Surface

    Colored surface used as backdrop for the Label and Icon (optional) messaging.

  • 2

    Label

    Succinct text that supports a contextual messaging. Text color should match the Icon color and should coordinate with the Background hue.

  • 3

    Icon / Left

    Visual support for Label messaging. Most commonly used position. Should not be used in conjunction with Icon / Right.

  • 3

    Icon / Right

    Visual support for Label messaging. Typically used a directional indicator. Should not be used in conjunction with Icon / Left.

Specs

Component details and standards such as spacing, sizing, and color.

Spacing

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.

Large

Spacing specifications for large button with auto widthSpacing specifications for large full-width button
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

Small

Spacing specifications for small button with auto width
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.

Sizing

Sizing specifications for button
Text should follow the Title size 6 that translates to 16px bold. Icons should apply the Small size.

Color

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.

Primary

Color specifications for primary button
Use the Primary variation to build the strongest emphasis for CTAs.

Secondary

Color specifications for secondary button
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.

Tertiary

Color specifications for tertiary button
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.

Caution

Color specifications for caution button
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.

Solid

Color specifications for solid button
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.

Best practices

Below is a list of examples of how CTAs should/shouldn’t be used through visual representations of our Do’s and Dont’s.

Do

Place the Primary CTA in the top position when buttons are stacked vertically.

Don't

Place the Primary CTA under any other CTA option.

Do

Use iconography provided by Thumbprint for the left / right icons.

Don't

Do not use external images, iconography, or emojis.

Do

Use icons intentionally and responsibly. Icons should provide immediate and relative support to the experience.

Don't

Use iconography that can be misleading or does not provide additional context.

Do

Use the spacing and sizing provided by the component.

Don't

Make sizing adjustments for buttons to fit particular circumstances.

Do

Use colors provided by the variant options determined by the button theme.

Don't

Adjust CTA colors to fit a particular context.

Accessibility

  • 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.

Content design

  • 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.

Related components

  • Button Row - Consistent spacing between buttons.
  • Link - Color and style variations for anchor links.
  • FAB - Buttons providing easy access to important actions.
  • Chip - Compact controls that allow for toggling and filtering.