Button - Tocas UI

Disabled

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

<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>

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>

Labeled Icon

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>

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>

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>

Like and Dislike

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>

Split Button

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>