There are 2 sizes basic buttons: Large and small.
- Use large button when space is ample. i.e. forms.
- Use small button when: Space is limitted. i.e. in tables and modals.
A button can be formatted to show different levels of emphasis.
Use the primary button when:
- If there is only one button, use primary to emphasize.
- Clearly defined primary action to continue the workflow.
- In a group of buttons, there is intended to be one primary action.
Use the secondary button when:
- There is no clearly defined primary action
- In a group of buttons, the action is secondary or optional.
- Active state shows the action is available.
- Hover state indicates the button is active.
- Disabled state shows the action is currently not available.
- Loading state shows the button will become active when the loading is done.
- Focused state shows the button is selected when using keyboard. Make all buttons keyboard compatible as the browser default.
A button can have an icon and a label
Buttons can exist together as a group.
- In mixed emphsis group, the primary should be on the left or top of the seconderay. e.g. Apply and Cancel.
- The same ordinality buttons can also be used in a group. But ideally define a primary action, and use only one primary button in a group.
Split button is a hybird of a button and a dropddown selector. The lebel on the button defines the primary action (e.g. “download”)
The menu should have multiple optional actions, the behavior is the same as dropdown selector. This button is useful when the real estate is limited. i.e. to surface multiple actions in a table row.
Split buttons are subject to the same grouping and stacking rules as basic buttons.