Buttons allow users to take actions and make selections with a single click or tap.
Buttons indicate available actions and allow user interaction within the interface. As key elements in the WordPress UI, they appear in toolbars, modals, and forms. Default buttons support most actions, while primary buttons emphasize the main action in a view. Secondary buttons pair as secondary actions next to a primary action.
Each layout contains one prominently placed, high-emphasis button. If you need multiple buttons, use one primary button for the main action, secondary for the rest of the actions and tertiary sparingly when an action needs to not stand out at all.
Primary buttons stand out with bold color fills, making them distinct from the background. Since they naturally draw attention, each layout should contain only one primary button to guide users toward the most important action.
Secondary buttons complement primary buttons. Use them for standard actions that may appear alongside a primary action.
Tertiary buttons have minimal emphasis. Use them sparingly to subtly highlight an action.
Use default buttons for actions of equal priority.
Link buttons have low emphasis and blend into the page, making them suitable for supplementary actions, especially those involving navigation away from the current view.
### Destructive
Use this variant for irreversible actions. Apply sparingly and only for actions with significant impact.
The default size is 40px. Use smaller sizes for compact views or when placing buttons in small components, such as dropdowns or dialogs.
- Label buttons to show that a click or tap initiates an action.
- Use established color conventions; for example, reserve red buttons for irreversible or dangerous actions.
- Avoid crowding the screen with multiple calls to action, which confuses users.
- Keep button locations consistent across the interface
Buttons should be clear and predictable, showing users what will happen when clicked. Make labels reflect actions accurately to avoid confusion.
Start button text with a strong action verb and include a noun to specify the change, except for common actions like Save, Close, Cancel, or OK.
For other actions, use a {verb}+{noun} format for context. Keep button text brief and remove unnecessary words like "the," "an," or "a" for easy scanning.
Yeah, I didn't add the
focusstate because I thought it was a global accessibility feature that applies to all components equally, not a button-specific state. Do you think it should be there @mirka?