Buttons are typically used for “final” actions. The intent is to “complete” a user flow. For example, use buttons at the end of a form to submit it; the end of a dialog to close it, accept it, or move to the next one; or the end of a settings screen to commit changes. The main concept is finishing or finalizing. The text of a button communicates to the user what will happen after interacting with it.
Buttons can navigate a user elsewhere but only because they are done with an action or their flow. Style variations, including text and background colors, have been vetted for a variety of use cases and accessibility.
<button>Button</button>
<button disabled>Disabled Button</button>
<button class="sme-button-primary">Button</button>
<button class="sme-button-primary" disabled>Disabled Button</button>
<button type="submit">Submit</button>
<button class="sme-button-trigger">Button</button>
<button class="sme-button-trigger" disabled>Disabled Button</button>
Button styles are not limited to button elements. Any element with the .sme-button class can act as a button. Just be sure to include the nessecary accessability attributes.
When using an anchor as a button, you should use the role attribute. If there is no href attribute, then also apply a tabIndex to the element.
<a role="button" class="sme-button">Anchor Button</a>
<a role="button" class="sme-button" disabled>Anchor Disabled Button</a>
<a role="button" class="sme-button sme-button-primary">Anchor Primary Button</a>
<a role="button" class="sme-button sme-button-primary" disabled>Anchor Primary Disabled Button</a>
<a role="button" class="sme-button sme-button-trigger">Anchor Trigger Button</a>
<a role="button" class="sme-button sme-button-trigger" disabled>Anchor Trigger Disabled Button</a>
Like the anchor, div (or any other element) as a button should use the role attribute. These buttons should always apply a tabIndex to the element.
<div role="button" class="sme-button">Div Button</div>
<div role="button" class="sme-button" disabled>Div Disabled Button</div>
<div role="button" class="sme-button sme-button-primary">Div Primary Button</div>
<div role="button" class="sme-button sme-button-primary" disabled>Div Primary Disabled Button</div>
<div role="button" class="sme-button sme-button-trigger">Div Trigger Button</div>
<div role="button" class="sme-button sme-button-trigger" disabled>Div Trigger Disabled Button</div>