Buttons
Buttons should be used for form submission and in association with click events where state is of concern. Anchor links should be avoided for any state driven click events.
WAI-ARIA Reference: A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. A common convention for informing users that a button launches a dialog is to append "…" (ellipsis) to the button label, e.g., "Save as…". [ Source ]
Buttons Sample(s):
Inline Buttons
Primary Button
Primary buttons are as calls to action.
Secondary/Alt Button
Secondary buttons are used for form submissions, and alternative options to form submissions.
The secondary alt button (below) should be used to present an alternative option to the secondary default button (above).
Text Only Button
Text only buttons are used for non-buying/quote actions and also in the case where there is an equal "or" option.
<button class="btn btn-primary">Primary Button Block</button>
<button class="btn btn-primary" disabled>Primary Button Disabled Block</button>
<button class="btn btn-secondary">Secondary Button Block</button>
<button class="btn btn-secondary" disabled>Secondary Button Disabled Block</button>
<button class="btn btn-secondary-alt">Secondary Alt Button</button>
<button class="btn btn-secondary-alt" disabled>Secondary alt Button Disabled</button>
<button class="btn btn-text">Text Only Button Block</button>
<button class="btn btn-text" disabled>Text Only Button Disabled Block</button>Responsive Buttons
Responsive buttons are full-width at the mobile breakpoint and inline/auto-width at large screen breakpoint
<button class="btn btn-primary sm:w-full lg:w-auto">Primary Responsive Button</button>
<button class="btn btn-primary sm:w-full lg:w-auto" disabled>Primary Responsive Disabled Button</button>
<button class="btn btn-secondary sm:w-full lg:w-auto">Secondary Responsive Button</button>
<button class="btn btn-secondary sm:w-full lg:w-auto" disabled>Secondary Responsive Disabled Button</button>
<button class="btn btn-secondary-alt sm:w-full lg:w-auto">Secondary Alt Responsive Button</button>
<button class="btn btn-secondary-alt sm:w-full lg:w-auto" disabled>Secondary Alt Responsive Disabled Button</button>Full Width Buttons
<button class="btn btn-primary w-full">Primary Full-Width Button</button>
<button class="btn btn-primary w-full" disabled>Primary Full-Width Disabled Button</button>
<button class="btn btn-secondary w-full">Secondary Full-Width Button</button>
<button class="btn btn-secondary w-full" disabled>Secondary Full-Width Disabled Button</button>
<button class="btn btn-secondary-alt w-full">Secondary Alt Full-Width Button</button>
<button class="btn btn-secondary-alt w-full" disabled>Secondary Alt Full-Width Disabled Button</button>Best Practices
For more information, visit this MDN resource