Contextual Sign in button: Canada.ca design system

  • Last updated: 2022-09-23

The Sign in button is an optional header element that directs people to government accounts that require authentication. It is a contextual and persistent call to action within a group of related pages.

Sign in – large screen
Sign in header for large screens
Sign in – small screen
Sign in header for small screens

On this page

When to use

Add the Sign in button when signing in to an account is a key task within a series of pages. This includes:

What to avoid

How to implement

You can use the Sign in button in addition to a supertask button on the same page. If you have an existing super task button, don’t remove it. Instead, add the Sign in button. You may see changes in use over time in your analytics that show that you can remove the super task button.

Design specifications

Button structure

Default state

default state

Hover state

hover state

Code

GCWeb (WET) Variables, parameters and working examples

Research and blog posts

Latest changes

Expanded Sign in button guidance

Discussion

Discuss the pattern in github issues

Did you find what you were looking for?

What was wrong?

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Thank you for your feedback

Date modified: