Buttons allow users to take actions and make choices with a single click.
The .btn class can be applied to any element to give it the appearance of a button:
.btn
<button class="btn">Button</button> <a href="#" class="btn">Link Button</a>
Use a .bg class to apply a color to the button:
.bg
<button class="btn bg-accent">Accent</button> <button class="btn bg-success">Success</button> <button class="btn bg-warning">Attention</button> <button class="btn bg-danger">Danger</button> <button class="btn bg-emphasis">Emphasis</button>
For toggle buttons, use the [aria-pressed="true"] attribute to indicate that the control is turned on:
[aria-pressed="true"]
<button class="btn" aria-pressed="true">Active</button>
.btn--outline and .btn--transparent are available to create less visually prominent buttons:
.btn--outline
.btn--transparent
<button class="btn btn--outline">Outline</button> <button class="btn btn--transparent">Transparent</button>
Icons can be used in buttons to supplement text labels:
<button class="btn"> @icon('tabler-check') Accept </button>
Use the .btn--icon class to create an icon-only button. Don't forget to add an aria-label attribute or a tooltip.
.btn--icon
aria-label
<button class="btn btn--icon" aria-label="Accept"> @icon('tabler-check') </button>
.btn--sm, .btn--wide and .btn--narrow are available to tweak the size of a button:
.btn--sm
.btn--wide
.btn--narrow
<button class="btn btn--sm">Small</button> <button class="btn">Normal</button> <button class="btn btn--wide">Wide</button> <button class="btn btn--narrow">Narrow</button>
No Results Found
Something Went Wrong