<button class="btn">Default</button>

Buttons should be written using the <button> html tag. However, if a button is an <a> tag styled with the .btn class and has in-page functionality (such as toggling elements), the role attribute should be set to “button” and the tabindex attribute should be set to “0.” Refer to the best practices illustrated in the MDN documentation for the “button” role.

If the button is a <button> element and appears within a <form> tag, the type attribute should be explicitly set to submit, reset, or reset. By default (without the type attribute) <button> elements are set to the submit type.

<button>
  <svg aria-hidden="true" class="icon-ui mie-1">
    <use xlink:href="#feather-trash"></use>
  </svg>Text Button
</button>

Tailwindcss logical utilities can be used to add spacing on either side of the icon; margin start: mis-1, margin end: mie-1.

<button class="btn btn-primary">Submit</button>

The primary button should be used for in-page functionality and form submitting buttons.

<a class="btn btn-secondary">Go to Page</a>

The secondary button should be used for calls-to-action and page links (not anchor links).

<button class="btn btn-large btn-primary">Large Button</button>

To use a large button add the .btn-large class to the .btn element.

<button class="btn btn-app btn-primary">Default</button>

Application buttons are ideal for progressive web applications. They have no hover state and a slight bevel. To use an application button add the .btn-app class to the .btn element.