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 Styles

Secondary Button (Default Style)

<button>Button</button>
<button disabled>Disabled Button</button>

Primary/Submit Button

<button class="sme-button-primary">Button</button>
<button class="sme-button-primary" disabled>Disabled Button</button>
<button type="submit">Submit</button>

Button Trigger (Action Trigger)

<button class="sme-button-trigger">Button</button>
<button class="sme-button-trigger" disabled>Disabled Button</button>

Other Elements

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.

Anchor as Button

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>

div as Button

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 Button
Div Disabled Button
Div Primary Button
Div Primary Disabled Button
Div Trigger Button
Div Trigger Disabled Button
<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>