Button

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.

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.

Resources

• Human Interface Guidelines: Buttons
• Material Design Guidelines: Buttons
• “Getting to Know Buttons and Links” by Sera Tejima on Medium
• “UI Cheat Sheet: Buttons” by Tess Gadd on Medium