Buttons are useful to draw attention to a goal or action. Calls to actions within buttons should be explicit.
This component is deprecated! Please use the new Button instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
<tk-button
alignment="center"
size="standard"
status="ready"
type="contained"
variant="standard"
>
Example
</tk-button>TkButton in an <a> or <button> <form action="http://www.google.com" id="formId">
<tk-button
action-type="submit"
form="formId">
Submit
</tk-button>
</form><tk-button type="outline">
Locked feature
<tk-icon class="ml-2x" name="lock" size="small"></tk-icon>
</tk-button>
<hr class="horizontal-rule" />
<tk-button
type="outline"
>
<tk-icon class="mr-2x" name="play" size="small"></tk-icon>
10:03
</tk-button>Occasionally, an icon helps provide necessary context to an action. For example, we use a lock icon to visibly communicate to a customer that a feature or flow is unavailable.
For video play buttons that utilize preview images, use the tk-poster-play component that can be found here.
<tk-icon-button>
<tk-icon name="close"></tk-icon>
</tk-icon-button>Please use the TkIconButton component for this. Full reference here.
status Prop to disabled when applicable.<button class="btn--inverse mb-2x">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.
<div class="l-flex l-flex-wrap">
<tk-button class="mb-2x btn-md-block mr-lg-1x">Contained</tk-button>
<tk-button class="mb-2x btn-md-block mr-lg-1x" type="outline">Outline</tk-button>
<tk-button class="mb-2x btn-md-block" type="ghost">Ghost</tk-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.
<div class="btn-group">
<tk-button class="mr-2x" type="outline">Cancel</tk-button>
<tk-button>Send</tk-button>
</div>When two or more buttons need to be next to each other. Commonly used in modals.
Receives :focus
Buttons without content or a name should have aria-label such as icons.
Receives :focus
Groups of radio buttons should share the same :name