Input Row
Horizontally align inputs and buttons
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>