package: '@thumbtack/tp-ui-element-button' kit: button/index.mdx platform: scss url: /components/button/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-element-button';

Button themes

These are the available Button styles for use on light background colors.

<div class="tp-button-row">
    <button class="tp-button">Primary</button>
    <button class="tp-button tp-button--secondary">Secondary</button>
    <button class="tp-button tp-button--caution">Caution</button>
</div>

Use on dark backgrounds

The solid theme works well on dark backgrounds.

<div class="tp-button-row"><button class="tp-button tp-button--solid">Solid</button></div>

Small buttons

Buttons are large by default. The tp-button--small class allows you to render a small button.

<div class="tp-button-row">
    <button class="tp-button tp-button--small">Primary</button>
    <button class="tp-button tp-button--small tp-button--secondary">Secondary</button>
    <button class="tp-button tp-button--small tp-button--caution">Caution</button>
</div>

Disabled buttons

The disabled attribute visually and functionally disables the button.

<div class="tp-button-row">
    <button class="tp-button" disabled>Primary</button>
    <button class="tp-button tp-button--secondary" disabled>Secondary</button>
    <button class="tp-button tp-button--caution" disabled>Caution</button>
</div>

<div class="tp-button-row"><button class="tp-button tp-button--solid" disabled>Solid</button></div>

Full width buttons

<button class="tp-button tp-button--full">Send Quote</button>

Full width on small screens

This button becomes full width on viewports that are smaller than our small breakpoint. The width is `auto` on larger screens.

<button class="tp-button tp-button--full-below-small">Send Quote</button>

Icon within a button

The tp-button-icon class helps position small icons from Thumbprint Icons.

<button class="tp-button">
    <span class="tp-button-icon">
        <svg
            class="tp-button-icon__icon"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            width="18"
            height="18"
            viewBox="0 0 18 18"
            data-thumbprint-id="contentmodifier-message--small"
        >
            <path
                fillRule="evenodd"
                d="M7.5,3.00025544 C5.02,3.00025544 3,5.01951331 3,7.50083018 C3,8.84900235 3.597,10.1141639 4.637,10.9732736 L5,11.2723118 L5,13.5694972 L7.769,11.9974044 L8.014,12.0014049 C8.099,12.0024051 10.5,12.0014049 10.5,12.0014049 C12.981,12.0014049 15,9.98114693 15,7.50083018 C15,5.01951331 12.981,3.00025544 10.5,3.00025544 L7.5,3.00025544 Z M3,17.0022736 L3,12.1904291 C1.724,10.968273 1,9.28405791 1,7.50083018 C1,3.91637243 3.916,1 7.5,1 L10.5,1 C14.084,1 17,3.91637243 17,7.50083018 C17,11.0852879 14.084,14.0016604 10.5,14.0016604 L8.239,14.0016604 L3,17.0022736 Z"
            />
        </svg>
        <span class="tp-button-icon__text">Send Message</span>
    </span>
</button>

Buttons that look like text links

The tp-button-reset class removes <button> styles while the tp-link class adds link styles. See tp-link documentation for more tp-link examples.

Note that tp-button--reset (the double dash is now single) has been deprecated.

The Pro exceeded our expectations and did a fantastic…
<button class="tp-button-reset tp-link">Read more</button>

Deprecated button styles

Line button

<button class="tp-button tp-button--line">Line</button>

Clear button

<button class="tp-button tp-button--clear">Clear</button>