Button Component
Prominent link with customizable image.
This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.
On this page:
Last reviewed: September 21, 2021
Using This Component
The component as it first appears on the page, showing the default "Learn more" text in a gray box.
This component has two tabs: Button Link and Advanced.
It can be placed in the page header, main body or in the right sidebar. It can also be used on a homepage. When it is first placed on the page, the default "Learn more" text is displayed, in a gray box.
Note: the Button component uses CSS3 and may look slightly different depending on the Web browser being used.
Button Link Tab
Button Text - Type the wording you want displayed on your button (Learn More is the default text).
Additional Label Text - Allows for a longer description to assist screen readers to give more context for repetitive buttons on the same page.
Link - Enter a URL here to turn the title into a clickable hyperlink. Use the magnifying glass to browse for a target page within the UBCMS.
Open in new window - This optional setting forces the clicked link to open in a new browser tab or window.
- When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website.
- If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server.
- Read more about link labels.
The component opened for editing showing the Button Link tab settings.
Advanced Tab
The Advanced tab allows you to customize the component by choosing the width and color.
Width - Choose from:
- Width of Text (default, buttons appear side by side)
- Full Width (buttons stack vertically) *
* Full width will fill the available space.
Button Color - Choose from:
- Gray (default)
- Blue
- Orange
- Green
- White
- Yellow **
** Yellow was added for use in emergency communications, to supplement the Issues Advisory Banner.
Note: An older version of this component had settings for shapes and text alignment, but these will be ignored if present.
The component opened for editing showing the Advanced tab settings.
Technical Restrictions
- The yellow color is intended to be used for emergency communications, to supplement the Issues Advisory Banner.
Accessibility Concerns
Additional Label Text Setting
This setting (e.g. in Call to Action and Button components) assists screen readers by giving more context for links with repetitive occurrence on the page. That is, if you have a page with several identically labeled links (e.g. ‘email’ links in a series of employee profiles, where brevity and repetition are desirable), the screen reader will apply the additional text to clarify the difference between these otherwise identically labelled links.
Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.
Additional Reference:
Use 'Open in New Window' Sparingly
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.