How to Use the Buttons – Circular Button Icons with Titles Component
This article walks through how to use the Circular Button Icons with Titles component. This component is ideal for highlighting a small set of high-interest destinations in a visual, scannable way, especially on landing pages where you want users to quickly choose a pathway without reading a lot of text. Each circular button links to a page, uses a background image, and displays a short title over the image. The component also includes a built-in “Explore” circle that should link to the main hub page for the set of links.
What This Component Is
The Circular Button Icons with Titles component creates a set of large, image-based link buttons that help users quickly navigate to key sections. It’s a good fit when you want the page to feel more visual than a standard list of links, while still keeping the options clear and easy to tap/click.
This component is built around two rows of circles plus a final “Explore” circle. You can add and reorder circles within each row, but the design looks best (and behaves most reliably) when you keep the set small and balanced, with a consistent style of imagery and short, punchy titles.
When to Use
Use this component when:
- You want to feature a handful of top links as “destinations” (ex: Student Life, Arts & Culture, Health & Safety) and make them easy to spot at a glance.
- You have a clear hub page that the “Explore” circle can point to, so users have a simple next step if they don’t choose one of the circles.
Avoid this component if:
- You need to include a lot of links or many categories (use a link list columns/directory component instead).
- Your links require descriptive supporting text to make sense (use cards, spotlight boxes, or standard content sections).
- You plan to add many circles. Note that overloading the layout can cause spacing/alignment issues and make the section harder to scan.
