Button
Description
Our buttons are the main interaction element and should only be used for that.
The main call to action should be a primary button. If it is absolutely necessary to have more than one button, then all others should be secondary buttons.
If there is no call to action worth emphasising, all interaction elements could be secondary buttons or interaction icons.
In special situations there might be a need for our subtle button.
Usage
Use the correct HTML element: A button must always be a button <button> or a link <a>, never another element with just an on-click event. Screen readers generally won't know that any other element might be a usable button.
If it is unavoidable to use a different HTML element to do the same functionality as a button, use the aria role='button' to let screen readers know the area is clickable.
Ensure Keyboard Navigability: Ensure the button is navigable using tab keys and can be activated with Space or Enter or mouse click. A clear focus state should be visible.
Use clear labeling: Text on buttons should be concise and clearly describe the action that will occur when clicked.
Stick to the standards: Don't mix up buttons and links. A link brings you to another page, or a completely other state of your app. A button does something, it triggers an action.