Button - Tocas UI

Introduction

Getting Started Colors Responsive

Layout

Box Center Container Content Control Grid Space Row Wrap

Forms

Button Checkbox Fieldset File Input Radio Select Selection Switch

Typography

Divider Header Mask Quote Segment Text

Feedback

Gauge Loading Modal Notice Placeholder Procedure Progress Snackbar

Media

Avatar Flag Icon Iconset Image Imageset

Data

Accordion Badge Checklist Chip Close Conversation List Meta Rating Statistic Table

Navigation

Breadcrumb Menu Pagination Tab

Application

App Layout App Navbar App Sidebar

Example

Theme

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>

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>

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>

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?

States

Disabled is-disabled Loading is-loading

Variations

Secondary is-secondary Outlined is-outlined Negative is-negative Ghost is-ghost Circular is-circular Icon is-icon Side Icon is-start-icon Labeled Icon is-start-labeled-icon Fluid is-fluid Wide is-wide Sizes is-small Dense is-dense

Compositions

Buttons {{ts-wrap}}