Register

Buttons

One primary action a screen; the rest quieter

Kinds

Primary for the one thing to do; secondary for the rest; ghost in toolbars; danger to remove.

Show the code
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn">Cancel</button>
<button type="button" class="btn btn-ghost">
<i class="ti ti-filter">
</i>Filters</button>
<button type="button" class="btn btn-danger">
<i class="ti ti-trash">
</i>Delete</button>
<button type="button" class="btn btn-danger-soft">
<i class="ti ti-archive">
</i>Archive</button>

Sizes

Small in tables, large on forms, extra large at the counter.

Show the code
<button type="button" class="btn btn-sm">Small</button>
<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-xl">Extra large</button>

With an icon

The icon before the words; an icon-only button has its name in a label and a tooltip.

Show the code
<button type="button" class="btn btn-primary">
<i class="ti ti-plus">
</i>Add product</button>
<button type="button" class="btn">
<i class="ti ti-download">
</i>Export</button>
<button type="button" class="btn btn-icon" aria-label="Print" data-tip="Print">
<i class="ti ti-printer">
</i>
</button>
<button type="button" class="btn btn-ghost btn-icon" aria-label="More" data-tip="More">
<i class="ti ti-dots">
</i>
</button>

States

Disabled tells why nearby; busy keeps its width.

Add an item firstCurrent page
Show the code
<span class="cluster gap-2">
<button type="button" class="btn btn-primary" disabled aria-describedby="why-pay">Pay</button>
<span class="fs-sm muted" id="why-pay">Add an item first</span>
</span>
<button type="button" class="btn btn-primary" aria-busy="true">
<span class="spinner sm" aria-hidden="true">
</span>Saving…</button>
<a class="btn" href="buttons.html" aria-current="page">Current page</a>

Block

Full width on a phone, in a dialog, at the till.

Show the code
<button type="button" class="btn btn-primary btn-block" data-toast="Sale complete.">Complete sale</button>