Thumbprint logo

Components

Input Row

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>