Button
An interactive element to trigger the actions.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
<button class="ts-button">Submit</button>
States
Disabled

Makes the Button appear uninteractive. Remember to a disabled attribute to the input if you want to actually disable the Button behaviour.

<button class="ts-button is-disabled">Disabled</button>
Loading

Display a loading icon and makes it uninteractive. Remember to a disabled attribute to the input if you want to actually disable the Button behaviour.

<button class="ts-button is-loading">Loading</button>
Variations
Secondary

The less important action Buttons are usually used as a backup solution.

<button class="ts-button is-secondary">Cancel</button>
Outlined

A Button that has a basic structure only.

<button class="ts-button is-outlined">See More</button>
Negative

Warn users that this behavior may be dangerous.

<button class="ts-button is-negative">Destroy Data</button>
<button class="ts-button is-negative is-outlined">Abandon Draft</button>
Ghost

Actions that are not considered or are rarely performed.

<button class="ts-button is-ghost">Forget Password</button>
Circular

A Button with rounded corners can present a call-to-action button.

<button class="ts-button is-circular">Buy Now</button>
<button class="ts-button is-circular is-outlined">Download</button>
Icon

The Button with the icon only.

<button class="ts-button is-icon">
    <span class="ts-icon is-magnifying-glass-icon"></span>
</button>
<button class="ts-button is-icon is-negative is-outlined">
    <span class="ts-icon is-trash-icon"></span>
</button>
Side Icon

The Button can have an icon next to the text, and the icon will be centered alongside the text.

<button class="ts-button is-start-icon">
    <span class="ts-icon is-cart-plus-icon"></span>
    Add To Cart
</button>
<button class="ts-button is-end-icon is-secondary">
    Submit
    <span class="ts-icon is-check-icon"></span>
</button>

The labeled icons are always presented at the beginning or end of the Button, which provides a better visual balance for Buttons that are arranged vertically up and down.

<button class="ts-button is-start-labeled-icon">
    <span class="ts-icon is-heart-icon"></span>
    Favorite
</button>
<button class="ts-button is-start-labeled-icon is-outlined">
    <span class="ts-icon is-paper-plane-icon"></span>
    Submit
</button>
<button class="ts-button is-end-labeled-icon is-secondary">
    Star
    <span class="ts-icon is-star-icon"></span>
</button>
Fluid

The width of the Button can fill the entire parent container.

<button class="ts-button is-fluid">Login</button>
Wide

Adds the horizontal padding, useful if the content is too short.

<button class="ts-button is-outlined">Default</button>
<button class="ts-button is-wide is-outlined">Wide</button>
Sizes

Change the size of the button.

<button class="ts-button is-small">Small</button>
<button class="ts-button">Default</button>
<button class="ts-button is-large">Large</button>
Dense

Presents a dense Button by changing the padding of the items.

<button class="ts-button is-dense">Follow</button>
Compositions
Buttons

Use Wrap if there is another Button next to each other, it automatically adds the spaces between the elements.

<div class="ts-wrap">
    <button class="ts-button">Publish</button>
    <button class="ts-button is-negative is-outlined">Abandon Draft</button>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel