Button

A button indicates a possible user action.
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<button class="ts-button">Submit</button>
States
Disabled

A button can show it's disabled. For link buttons, use the .is-disabled class.

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

A button can show a loading indicator. [disabled] attribute is required to disable interaction.

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

A button with less emphasis.

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

A outlined button is less pronounced.

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

A button can hint towards a negative consequence.

<button class="ts-button is-negative">Destory</button>
<button class="ts-button is-negative is-outlined">Discard</button>
Ghost

A button that is infrequently to be used.

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

A button can be circular.

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

A button can have only an icon.

<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

A button with icon next to 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">
    Done
    <span class="ts-icon is-check-icon"></span>
</button>

A button can use an icon as a label.

<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>
    Send
</button>
<button class="ts-button is-end-labeled-icon is-secondary">
    Mark
    <span class="ts-icon is-star-icon"></span>
</button>
Fluid

A button can take the width of its container.

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

A button can adjust its padding to fit spaces.

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

A button can have different sizes.

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

A button can adjust its height for a tighter or more relaxed look.

<button class="ts-button is-dense">Dense</button>
<button class="ts-button">Default</button>
<button class="ts-button is-relaxed">Relaxed</button>
Group
Buttons

Buttons can exist together as a group, with dividers in the between.

<div class="ts-buttons">
    <button class="ts-button">Submit</button>
    <button class="ts-button is-icon">
        <span class="ts-icon is-chevron-down-icon"></span>
    </button>
</div>
<div class="ts-buttons">
    <button class="ts-button is-outlined">Submit</button>
    <button class="ts-button is-outlined is-icon">
        <span class="ts-icon is-chevron-down-icon"></span>
    </button>
</div>
Compositions
Buttons

Use a Wrap to keep a consistent gap between buttons.

<div class="ts-wrap">
    <button class="ts-button">Publish</button>
    <button class="ts-button is-negative is-outlined">Discard Draft</button>
</div>

Show a like/dislike button group.

<div class="ts-buttons">
    <button class="ts-button is-secondary is-circular is-start-icon">
        <span class="ts-icon is-thumbs-up-icon"></span>
        324
    </button>
    <button class="ts-button is-secondary is-circular is-start-icon">
        <span class="ts-icon is-regular is-thumbs-down-icon"></span>
        7
    </button>
</div>

Place a secondary button next to the primary button that opens a Dropdown.

<div class="ts-buttons">
    <button class="ts-button">Start Game</button>
    <button class="ts-button is-icon" data-dropdown="dropdown">
        <span class="ts-icon is-gear-icon"></span>
    </button>
</div>
<div class="ts-dropdown" id="dropdown">
    <button class="item">Preferences</button>
    <button class="item">Scan and Fix</button>
    <div class="divider"></div>
    <button class="item">Delete Game</button>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI