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

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

Functional grouping: Navigation


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



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


  • 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


  • 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


  • 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


  • 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.



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.



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


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


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


Do not use multiple icons in the same button.