Button Component

Prominent link with customizable image.

On this page:

Accessibility
  • Additional Label Text Setting.
  • Link text should be meaningful.
  • Use 'Open in New Window' Sparingly.

> Read more about making this component accessible.

Last reviewed: May 17, 2022

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

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.

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.

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)