Otherwise, use the from MyButton = () => Click me! The only exceptions are common actions like Save, Close, Cancel, or OK.

Never deceive a user by mislabeling a button.īuttons text should lead with a strong verb that encourages action, and add a noun that clarifies what will actually change. Have consistent locations in the interface.īuttons should be clear and predictable-users should be able to anticipate what will happen when they click a button.Too many calls to action on one screen can be confusing, making users unsure what to do next. Prioritize the most important actions.For example, only use red buttons for actions that are difficult or impossible to undo. Clearly communicate that clicking or tapping will trigger an action.You’ll find them throughout a UI, particularly in places like: Browse: Home / Block Editor Handbook / Reference Guides / Component Reference / Button Button Editīuttons let users take actions and make choices with a single click or tap.īuttons tell users what actions they can take and give them a way to interact with the interface.

Dont push the red button levels