Components

Input Row(SCSS)

Horizontally align inputs and buttons.

Version:	`4.0.3` •View source•Changelog•Report 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>