Components
Clickable elements used to perform actions.
Version: | 4.0.3 •View source•Changelog•Report issue | |
---|---|---|
Install: | yarn add @thumbtack/thumbprint-scss |
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--tertiary">Tertiary</button><button class="tp-button tp-button--caution">Caution</button></div>
The solid
theme works well on dark backgrounds.
<div class="tp-button-row"><button class="tp-button tp-button--solid">Solid</button></div>
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--tertiary">Tertiary</button><button class="tp-button tp-button--small tp-button--caution">Caution</button></div>
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--tertiary" disabled>Tertiary</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>
<button class="tp-button tp-button--full">Send Quote</button>
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>
The tp-button-icon
class helps position small icons from Thumbprint Icons.
<button class="tp-button"><span class="tp-button-icon"><svgclass="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"><pathfillRule="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>
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>
<button class="tp-button tp-button--line">Line</button>
<button class="tp-button tp-button--clear">Clear</button>