Components

Input Row(SCSS)

Horizontally align inputs and buttons.

Version:4.0.0 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-scss

Button group

Default

<div class="tp-input-row">
<button class="tp-button tp-button--tertiary">Add User</button>
<button class="tp-button tp-button--tertiary">Delete User</button>
<button class="tp-button tp-button--tertiary">Make Donuts</button>
</div>

Full bleed

<div class="tp-input-row tp-input-row--bleed">
<button class="tp-button tp-button--full tp-button--tertiary">Add</button>
<button class="tp-button tp-button--full tp-button--tertiary">Delete</button>
<button class="tp-button tp-button--full tp-button--tertiary">Make</button>
</div>

With a divider

<div class="tp-input-row tp-input-row--bleed tp-input-row--divider">
<button class="tp-button tp-button--full">Add</button>
<button class="tp-button tp-button--full">Delete</button>
<button class="tp-button tp-button--full">Make</button>
</div>

Input row with button

The size="1" attribute is used here to allow the input to shrink as small as possible across browsers.

<div class="tp-input-row">
<input type="text" size="1" class="tp-text-input" />
<button class="tp-button">Get Started</button>
</div>

Input with button that flexes

<div class="tp-input-row tp-input-row--button-stretch">
<input type="text" size="1" class="tp-text-input" />
<button class="tp-button">Get Started</button>
</div>