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 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. 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.
{{code.example1}}
{{code.example2}}
{{code.example3}}
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 necessary 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.
{{code.example4}}
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.
{{code.example5}}