Button

Use button classnames to prioritize the possible actions in your app.

Assign data-ts="Button" to a button to initialize it as a Button.

<button data-ts="Button">
	<span>Default Button</span>
</button>

The default button looks like a link, but some CSS classnames can be added to make it look more like a button.

<button data-ts="Button" class="ts-primary">
	<span>Primary</span>
</button>
<button data-ts="Button" class="ts-secondary">
	<span>Secondary</span>
</button>
<button data-ts="Button" class="ts-tertiary">
	<span>Tertiary</span>
</button>

Button icons

Icons go into a separate i element. You can see a list of all icons.

<button data-ts="Button" class="ts-primary">
	<span style="display:none;">Button Text</span>
	<i class="ts-icon-arrowright"></i>
</button>

You'll notice in the code snippet that the span has been set to display:none.

Buttons should never show both text and icon at the same time.

If you need both, it's up to you to hide one or the other. In this example, the button has been rigged up to show the icon only in the mobile breakpoint.

<button data-ts="Button" class="ts-primary">
	<span class="ts-hide-mobile-only">Hidden In Mobile</span>
	<i class="ts-show-mobile-only ts-icon-arrowright"></i>
</button>

Button spinner

Assign the data-ts.busy attribute to a button to initialize a spinner.

<button data-ts="Button" data-ts.busy="true" class="ts-primary">
	<span>Primary</span>
</button>

Micro Button

You can add class ts-micro to get a micro button.

<button data-ts="Button" class="ts-primary ts-micro">
	<span>Primary</span>
</button>
<button data-ts="Button" class="ts-secondary ts-micro">
	<span>Secondary</span>
</button>
<button data-ts="Button" class="ts-tertiary ts-micro">
	<span>Tertiary</span>
</button>

You can group buttons in menus to unlock advanced layout options.