Button

Buttons are visual components designed to prompt users to take action on a screen or website. Well-designed buttons, also known as calls to action, offer users a clear and direct pathway toward the next step in a process or completion of a task.

Usage and Specifications

Collectively, the structure, colors, contrast, text, size, and location of buttons communicate emotion, status, visibility, readability, activity, and importance. Because buttons play such a pivotal role in digital engagement, it is important to design them with consistency and to give primacy to their purpose and functionality through design.

Structure

The first step in designing buttons for your project should be to create a classification structure of primary, secondary, and tertiary actions.

• Primary buttons represent a priority or most important action. Generally, primary buttons exist as stand-alone, emphasized functions on a screen or website. Most of the time, you should only have one primary action on a webpage at a time.
   
• Secondary buttons represent the next or alternate option and lack the visual prominence of a primary button.
   
• Tertiary buttons represent an action users are less likely to select. Tertiary buttons are visually subtle and may be positioned away from other buttons.
   

Colors

Colors can either encourage user interaction or lead users to avoid taking action. Color, gradient level, and transparency communicate a button’s status. Primary buttons should be a color that matches or compliments the University brand and that evokes the action users are intended to take. Use color for clarity and usability. Do not choose colors based on seasonal or holiday traditions. Check the Examples section below for approved versions of button colors.
   

Contrast

Contrasting colors and backgrounds make buttons easy to identify and locate and help bring focus to a button.

Text

Button text sets the tone for user engagement. Users expect button text to provide a directive; thus, the text should be clear and concise. Avoid long words or wrapping text. Ideally, button text is a declarative statement of one to three short words that are task-specific. For example, “Submit,” “Save,” or “Sign Up Now.”

Size

Buttons should be sized to help users locate and engage with the content, making size an important factor in user interaction. Buttons associated with primary actions may be larger than buttons associated with secondary or tertiary actions; however, consider finger size on mobile devices may rule out having smaller buttons. The recommended minimum button size is 44 x 44 pixels. We have opted not to recommend a maximum size as the text is meant to be succinct and in alignment with the button command. Check the Examples section below for typical button sizes.

Location

Place buttons where users expect to find them, and be consistent in the placement of buttons for primary, secondary, and tertiary actions. It is a best practice for full-page designs to place primary action buttons on the left. If the primary action button is on the left for one full-page design, it should be on the left for all full-page designs. For modal windows, it is a best practice to place the primary action button on the right. Be consistent with placement of secondary and tertiary action buttons as well.

Status

Button status indicates whether the button is active or inactive and may also provide cues about whether it’s a primary, secondary, or tertiary action. Button status should be clearly distinguished from neighboring buttons through color (solid colors or gradients) and transparencies. Consider the “states” below; your project may not need all of them:

• Rest: Button is in a ready state but has not been engaged.
• Hover: Cursor is in use and in a floating position over the button.
• Inactive: Button is motionless; has not been clicked.
• Focus: Selection has been made by highlighting, but the button has not been clicked.
• Press: Full and active engagement, the button has been clicked.

Examples