Button

Buttons are graphical elements that initiate actions or commands. A common button is typically represented as a rectangular or rounded rectangle shape with text (button label) or an icon on it.

In user interfaces, buttons are used to initiate an action such as submitting a form, navigating to a different page, or triggering a specific function in an application. The design of the button, including its color, size, shape, and text, should clearly indicate its purpose to users.

A button's role is to encourage users to act. Button labels are as important as their design. Use action verbs to tell users what the button does so they can act without reading supporting text.

How do designers decide what buttons they need? Choosing the right type of button depends on the context and purpose of the action. Here are some common types of buttons used in UX design:

• Call to Action (CTA) buttons: A large, eye-catching button that prompts users to take a specific action, such as making a purchase or signing up for a service.
• Primary buttons: These are the main action buttons on a page, such as "Save" or "Submit". On a page, a CTA button is always the primary button, but a primary button isn't necessarily a CTA button.
• Secondary buttons: These buttons provide additional options or actions, such as "Cancel" or "Back". Secondary buttons often offer destructive actions like "Cancel," "Discard," or "Remove."
• Tertiary buttons: These are smaller in size, less critical buttons that still perform specific actions, such as "Back," "Clear," or "View/Hide."
• Icon buttons: These buttons use only icons instead of text to represent an action, such as a shopping cart icon for adding items to a cart.
• Link buttons: These buttons are styled like a regular text link, but they initiate an action instead of taking users to a different page.

Take the Common UI Button Styles lesson to learn about different button styles and tips for making them attractive, user-friendly, and functional.

An action button in UX and UI design is a type of button that triggers an action within an interface. It is a primary button that initiates an action, such as submitting a form, making a purchase, or sending an email. Action buttons are usually the most prominent elements on a page and use bold and contrasting colors to make them easy to find and use. Examples of action buttons include "Submit," "Buy Now," and "Send.”

Buttons allow users to interact with the interface and take action. Buttons provide clear and concise visual cues to inform users what will happen when they click or tap on them. The design and placement of buttons play a crucial role in the overall user experience, as they can impact users' ability to navigate and complete tasks efficiently. Buttons guide users toward their desired outcomes and provide a sense of control over the interface. Ultimately, the goal of buttons in UX design is to make the user journey through the interface as intuitive and seamless as possible.

Take our Best Practices for Designing UI Buttons lesson and learn how to create action-driven, accessible buttons.