Buttons are useful to draw attention to a goal or action. Calls to actions within buttons should be explicit.
<!-- The .mv-2x class is used for presentation only -->
<button class="btn--primary mv-2x">Primary</button>
<!-- `tertiary` class name is a misnomer -->
<button class="btn--tertiary mv-2x">Secondary</button>
<button class="btn--dangerous">Dangerous</button>Primary: The default action of the page or view. This represents the most important actions on the page. Secondary: The secondary action of the page. Dangerous: When a customer attempts a potentially destructive action we use red to warn them of the potential risk involved with completing such an action.
<button class="btn--link">Button link</button>Buttons should elicit an action. We use this style to make the button appear as a link which is especially useful next to text or within confined spaces. If the action links to another page or part of the app please see text link.
<button class="btn--primary btn--inline mb-2x btn-md-block">Primary</button>
<button class="btn--tertiary btn--inline mb-2x btn-md-block">Secondary</button>
<button class="btn--dangerous btn--inline mb-2x btn-md-block">Dangerous</button>
<div class="l-flex l-flex-wrap">
<button class="btn--primary mb-2x btn-md-block mr-lg-1x">Primary</button>
<button class="btn--tertiary mb-2x btn-md-block mr-lg-1x">Secondary</button>
<button class="btn--dangerous mb-2x btn-md-block">Dangerous</button>
</div>For times when buttons are next to each other on larger screens, but need to stack at smaller screens, we have classes to stack them. Use btn-md-block for screens stacking at medium screensizes and use btn-sm-block for stacking at small screensizes.
<button class="btn--inverse">Button inverse</button>
<button class="btn--inverse active">Button inverse</button>This style of button is used as a toggle to select one or more options. Button Inverse should always have a .input--hidden:checked + .btn--inverse applied to one of the options. For buttons that require more text, use .btn--multiline with this class.
input:checked with button inverse
<button class="btn--primary btn--inline">Default size</button>
<button class="btn--tertiary btn--inline">Default size</button>All buttons are this size by default .btn--inline added to place buttons next to each other.
<button class="btn--primary btn--compact btn--inline">Compact size</button>
<button class="btn--tertiary btn--compact btn--inline">Compact size</button>Compact: When there is a need to conserve space we use the compact button .btn--inline added to place buttons next to each other.
<button class="btn--tertiary btn--locked" aria-label="Locked feature">
Locked feature
<tk-icon class="btn__icon" name="lock" size="small"></tk-icon>
</button>Some flows and features are unavailable to customers based on pricing and packaging. We use a lock icon to visibly communicate that they cannot access this feature or flow.
.disabled class to locks that are disabled.<button type="button" class="btn--icon-only">
<tk-icon name="search" size="medium"></tk-icon>
<span class="sr-only">Screen Reader text</span>
</button>
<button type="button" class="btn--icon-square">
<tk-icon name="search" size="medium"></tk-icon>
<span class="sr-only">Screen Reader text</span>
</button>Some buttons use only icons to convey actions. This is used for commonly known actions like search.
<a href="#"
class="poster-play"
style="background-image: url(https://placekitten.com/200/300)"
aria-label="play video">
<span class="poster-play__button btn--primary btn--compact">
<tk-icon name="play" size="small"></tk-icon>
<span class="ml-2x">8:00</span>
</span>
</a>We use play icons on buttons for videos. Sometimes they can be standalone and sometimes they appear on video poster images.
<button type="button" class="btn--tertiary btn--inline">Button inline</button>When a button needs to be inline with the content.
Insight
Combine btn--variant (e.g. btn–primary, etc…) and btn--modifier classes to output any of the following formats.
<button type="button" class="btn--tertiary btn--centered">Button center</button>When a button needs to be centered on the page or in the given container.
<div class="btn-group">
<button type="button" class="btn--tertiary mr-2x">Cancel</button>
<button type="submit" class="btn--primary">Submit</button>
</div>When two or more buttons need to be next to each other. Commonly used in modals.
:focusaria-label such as icons.