Button
Use button classnames to prioritize the possible actions in your app.
Assign data-ts="Button" to a button or an
a to initialize it as a Button.
The default button looks like a link, but some CSS classnames can be added to make it look more like a button.
Button icons
Icons go into a separate i element. You can see a
list of all icons.
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 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.
You can group buttons in menus to unlock advanced layout options.
If you find a bug or need a feature…