...
Buttons are an action, so always lead with a verb
To provide context, buttons should use {verb} + {noun}, example "Find Location"
Where context is clear, a single verb may be used, such as within a form, "Next" and "Previous" do not require a noun. Aria-labels may add additional context for screen readers.
Button text is written in title case.
Common Names
Search
Find Location
Next / Continue
Back / Previous
Submit {Noun}
Using Primary Button
There should only be at most one Primary (btn-primary) action button on a page; the goal is to guide the user to the preferred action.
Primary-Cancel should only be used to confirm a destructive action (e.g. in conjunction with the Cancel modal).All other instances of cancel/delete/remove should use the regular Cancel (btn-cancel).
...
Icons within buttons should be used sparinglyavoided
When icons are used, it should be combined with the button name and icons should be to the left of the name.
Icons should very rarely be on their own; an exception is where space is limited and an icon is recognizable in it’s function. Screen reader only text (or an Aria-Label) must be applied.
Common Names
Generally Buttons should follow the `Action + Noun` format. Unless the context (noun) can easily be understood by other features such as labels, page titles, text descriptions
Search
Find Location
Next / Continue
Back / Previous
- Submit {Noun}
Accessibility
...