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