University at Buffalo (UB)
Transforming UB’s digital communications.
Button Component
Prominent link with customizable image.
On this page:
Last reviewed: November 11, 2022
Accessibility
- Additional Label Text Setting.
- Link text should be meaningful.
- Use 'Open in New Window' Sparingly.
Using This Component
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.
Click the wrench icon to 'configure' these settings.
Note: the Button component uses CSS3 and may look slightly different depending on the Web browser being used.
Technical Restrictions
- The yellow color is intended to be used for emergency communications, to supplement the Issues Advisory Banner.
Configure - Main Settings
Button Link Tab
The component opened for editing showing the Button Link tab settings.
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 - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Name: Provide the person's full name, in normal order; e.g. 'Jane Doe.' To include their degrees, use standard abbreviations (e.g. PhD) and separate with commas. (This information will be displayed in bold text, and linked if a URL is provided.)
Link - Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
- Same Tab - The link will load in the current browser tab or within the current frame/iframe if one exists. This is the default setting.
- New Tab - The link will load in a new browser tab.
- Parent Frame – The link will load within the parent iframe if one exists, otherwise it will load in the current browser tab.
- Top Frame – The link will ignore all frames/iframes and load in the current browser tab.
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
Advanced Tab
The component opened for editing showing the Advanced tab settings.
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.
Accessibility Concerns
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:
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Additional Reference:
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.