Button

Published Jun 8, 2022Updated Oct 10, 2023
Contribute to Docs

A button is a design element that allows users to take action.

Buttons play an essential role in digital products because they help users complete various actions, such as confirming a purchase, uploading a file, or closing a pop-up modal.

The design of a button should clearly convey its function, so the user understands what will happen if they select it. A button may feature text, an icon, or both to communicate what it does. Additionally, text, images, or other design elements near the button can provide context to clarify its purpose.

Button Elements

  • A text label describes the button’s function in words. Typically, the text is a verb (“Continue”) or short phrase (such as “Edit Profile” in the image below).
  • An icon is a glyph that symbolizes the button’s function. A button can include an icon and text, or an icon by itself. The icon should adhere to commonly accepted uses so it aligns with user expectations. For example, the thumbs-up icon is widely used to indicate approval or “liking” something. In the image below, there is a plus sign (+) in the “New Workspace” button.
  • A container is a shape that encompasses the button’s text label, icon, or both.
    • Containers create visual emphasis, allowing the buttons to stand out from other elements. A container with a solid fill (such as the “New Workspace” button below) is typically easier to spot than an outlined container that has a stroke but no fill (such as the “Edit Profile” button below).
    • Buttons without containers have less visual emphasis. Without a container, a text-only button may look like a link. However, a button helps the user complete an action while a link opens a new page or jumps to a specific area on a page.

Three buttons from Codecademy’s website: 1. Button with a container and a solid fill. 2. Button with an outlined container and no fill. 3. Text-only button with no fill.

Button Hierarchy

Designers typically categorize buttons as primary, secondary, or tertiary actions. These categories correlate to the level of visual emphasis that each button is given.

  • The primary action is what users are most likely to select, or it’s the option that the product is guiding users to select. Primary buttons, which typically have a container with a solid fill, are designed to draw the user’s attention. Generally, the user has access to one primary button at a time.

  • Secondary actions offer an alternative to the primary action, so they are given less visual emphasis. It’s common for a secondary button to have an outlined container with no fill, or no container at all. The user will be able to find the secondary button, but it will not be as noticeable as the primary button.

  • Tertiary actions are additional actions that the user may need to access. Tertiary buttons have the least visual emphasis and are often smaller than primary and secondary buttons. While they come in many styles, tertiary buttons are designed to be subtle, yet perceivable.

Pop-up modal from Codecademy’s website that includes primary, secondary, and tertiary actions: 1. Primary button has a container with a solid fill. 2. Secondary button is text-only, with no container. 3. Tertiary button is an icon with no container.

Resources

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy