Button Link with Icon Component

The button component allows you to create highly visible and standards-compliant button link with an optional icon. 

Choose from various color, size, and layout options and any of the icons available from the Font Awesome library.

This video on components features a demonstration of the button component and use of the icon feature.

When to use the button component

Buttons create a powerful call to action on your web page. The shape, size, and color compel users to take notice. Icons can be used to increase the button visibility and add additional context.

Usability guidance

Because a button is a powerful call to action, it's essential to use them sparingly. The use of too many buttons could negatively affect a user's interaction with the page.

Implementation

  1. Open a page in Modern Campus CMS and enter editing mode.
  2. Place your cursor where you would like to place a button link.
  3. From the toolbar, select the component icon  Snippet icon , which resembles an atom symbol.
  4. From the list of components, select the Button Link with Icon component.
  5. Fill in the required fields and select your options.
  6. Save and preview.