Layout & Component Blocks

Button Groups

Overview

A Button Group is a component that organizes multiple related buttons into a single horizontal or grid layout. It provides a clean, structured way for users to access grouped actions without cluttering the interface.

View Button Group Demo

When to Use

  • To present multiple related actions together in one place.
  • When actions are equal in importance and should be visually grouped for clarity.
  • To reduce visual clutter by consolidating buttons into a single component.
How To

How To

Create a Button Group

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Button Group component from the component list.
Screenshot of button group component showcasing how to add a button to the button group

Add a Button

To Add a Link/Email

  1. Click Button: Link to URL/Email.
  2. In the URL field, start typing the title of the page you want to link to.
    1. Select the page from the list when it appears.
    2. If you are linking to a page outside the CU Denver website, paste the full URL (for example, https://www.example.edu) into the URL field instead.
  3. Enter the Link text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.
  4. Attributes:
    1. Target: Select New window (_blank) for external links only. Otherwise, leave this set to - None -.
    2. ARIA Label: For web accessibility, enter clear, specific text only if your link text is generic (for example, “Learn More.”) 
      1. As a rule, you should always use clear, specific link text and leave the ARIA Label field blank.

Linking Best Practice

Always select pages from the site when possible. Only paste full URLs for external sites.

Why This Matters

Linking to pages by selecting them from the list (instead of pasting a URL) helps prevent broken links if a page’s URL changes. This helps keep the CU Denver website reliable for our visitors.

Screenshot of screen to add a button to the button group that links to URL

To Add a Link to Download a File

  1. Click the dropdown arrow and select Button: Download File.
  2. Enter the Button Text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.
  3. Click Add media to upload or select the file from the media library that you would like to link to.
Screenshot of adding a button to link to a downloadable file to a button group

User Experience Best Practices

  • Use specific and descriptive button labels. Generic labels like “Learn More” or “Read More” can be vague and may confuse users—especially those using screen readers. Each button should clearly communicate its purpose, such as “Learn about Graduate Admissions” or “View Case Study.”
  • Keep labels succinct and avoid line wrapping. While there’s no strict maximum word count for buttons or links, aim to make them as concise and descriptive as possible.
  • Avoid overwhelming users with too many buttons. Placing too many side-by-side can make the interface feel cluttered and confusing. To maintain usability and visual clarity, try limiting this component to no more than six buttons.