1. Labels

Buttons labels should be clear, concise, and action-oriented.

2. Priority

Prioritize the most important actions. Use secondary styles wisely.

3. Primary vs Secondary

Use button combinations consistently to help the user understand related actions. Primary and secondary buttons are always paired together.

4. Placement

Place commonly used actions in a consistent and familiar location.

5. Disabled States

Correctly utilize the corresponding disabled state style for each button.

6. Buttons vs links

Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.

For navigational actions that appear within or directly following a sentence, use the link pattern. Links are used primarily for navigation, and usually appear within or directly following a sentence.

7. Button Group Usage

Button groups are used to select an option or set a preference, not as an element for navigation between different types of data. Consider tabs for this type of treatment.

8. Button Group vs Dropdown Button

Button groups provide higher visibility while dropdowns save space, so consider users' needs for the context.