<button class="ts-button">Submit</button>
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>
The less important action Buttons are usually used as a backup solution.
<button class="ts-button is-secondary">Cancel</button>
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>
Actions that are not considered or are rarely performed.
<button class="ts-button is-ghost">Forget Password</button>
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>
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>
The width of the Button can fill the entire parent container.
<button class="ts-button is-fluid">Login</button>
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>
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>
Presents a dense Button by changing the padding of the items.
<button class="ts-button is-dense">Follow</button>
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>