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">Primary</button>
<button class="btn--tertiary mv-2x">Tertiary</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. Tertiary: 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--inverse">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.
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">
Button Lock
<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--secondary 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.
<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.