Button - Tocas UI

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>

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>

Labeled Icon

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>

Width

Change the horizontal padding of the Button. If the text inside the button is too short, you can try to make it wider, vice versa.

<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

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>

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>