Button

Uses

A button gives your visitors an easy way to get from your page to another relevant page.

Examples

Many faculty pages use buttons to invite students to browse their programs:

The John Molson School of Business uses buttons, formatted as blocks, to link to information for different audiences:

Best practices

Settings tab

Label

The words you add to the Label field will appear on the button. Keep the label concise, e.g:

• Give now
  
• Explore microprograms
• Book an appointment

Concise labels help us avoid visual clutter.

Later, in the Advanced tab, you'll add more detailed text for people who use screen readers to navigate the page.

Link & target

If you're linking to a Concordia web page:

• In the Link field, use the magnifying glass dropdown to navigate through the tree to the page you want to link.
  
• Set the Target to Self, so the link opens in the current tab.

If you're linking to an external website:

• In the Link field, add the URL.
  
• Set the Target to Blank, so the link opens in a new tab.

Button block

• Only select Button block when placing buttons side by side in a Column control component.
  
• When displaying buttons side by side in a Column control, select Equal height in the Column control.

Advanced tab

ARIA label

An ARIA label is an invisible text description that's included specifically for screen readers. It provides additional context that overrides the visual text of the link for people using screen readers. This ensures they understand the purpose of the link, even if they're bypassing the surrounding content.

Accessibility

• Provide a concise Label and a descriptive ARIA label.
• If you're using a Button block, set the Button style to Large or X-Large. This makes it easy to read.

Design options

Button styles

AEM has numerous button styles.

• Don't use the Default button style. We have nicer styles available!
  
• Choose the style and colour that fit best with the existing elements on your page.
• Use only 1 or 2 button styles on a page.
  
• Use only 1 or 2 button colours on a page. Using more can make your page look cluttered.

Ghost light, dark or burgundy

This is our newest button style, and the one we use most frequently. It works best for strong calls to action that are 4 words or less. You'll frequently see a ghost button or two below a paragraph of text. For example:

Use no more than 2 ghost buttons together. Having 3+ ghost buttons together looks crowded and makes it harder for visitors to decide what to do next.

Only select Ghost (Light) if the button will be on a dark coloured background. For example:

Burgundy (arrow link)

This button style is best for longercalls to action. It's typically used to emphasize steps in majors processes. Only use it on a light background. Only capitalize the first word and any proper nouns. For example:

Simple (forward arrow)

This style is useful for calls to action that are 5+ words. Write the link text in sentence case, i.e. capitals only on the first word and any proper nouns. For example:

Note: If you're using Firefox to view a page, you'll see the button text but not the forward arrow. On Chrome, both the button text and forward arrow display as intended.

Simple (back arrow)

This button style should be used to go back to a parent page, like from an Event page back to the Calendar; or from a profile back to the list. Write the link text in sentence case, i.e. capitals only on the first word and any proper nouns. For example:

Large

This button style works well for strong calls to action. Ideally, it shouldn't exceed 4 words. For example:

X-Large

If your website has an existing Column control with button blocks, the style should be set to X-Large and the Column control should be set to Equal height.

Try it out!