Link button

Button allows users to take actions, and make choices, with a single tap. They are placed throughout a user interface such as in hero banner, CTA block, cards, etc. to draw attention and encourage action by the user.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Navigation

Demo

Configure: select the dropdowns below to display the variety of options that a button link supports.

Call to action

Code

Responsive preview

Usage best practices

Button should be easy to find and show clear states that users can understand immediately whether they can interact with it. Use the different button styles and sizes to establish a clear visual hierarchy of actions on the page.

List variations, features and usage
Variation	Unique features	Usage
Primary button	Contains: text label bordered container in primary brand colour (red) an right arrow icon (optional)	Primary buttons are high-emphasis buttons. Use them to emphasize the primary call to actions by: adding single prominent button per page to help users focus on the primary task adding the right arrow icon to further encourage users to take the action featuring it prominently within the page layout
Secondary/text button	Contians: text label light grey backgroung	Secondary/text buttons can be used: for miscellaneous actions on a page as a secondary action that goes along with the primary button
Utility button	Contains: text label bordered container in primary brand colour (grey) optional icon which can be place to the left or to the right of the text label	Use utility button style for all other actions on a page.
Mega button	Contains: text label bordered container in primary brand colours: red grey illustration that can either be placed on top or below the text label: icon SVG	Mega buttons can be used for vertical display of icons or illustrative images with text.

Do

Use a primary button to indicate the main call to action or the task completion action.

Use the utility or secondary/text buttons to indicate lower level actions that are not part of the main task flow on the page.

Use icons that clearly communicate their meaning.

Don't

Avoid cluttering a page with too many buttons. This can increase cognitive load, increase the decision making time and confuse the user.

Don't

Do not place multiple primary buttons on a page. This can create confusion for the user.

Don't

Do not wrap button text label. For maximum legibility, it should remain on a single line.

Don't

Do not use multiple icons in the same button.