Guidance
Use a button when you want the user to perform an action. Use buttons sparingly as overusing them makes them less noticeable. For navigating to other pages or anchors on the page, use a link instead. Examples of when to choose a button include:
- A call to action
- Start an application or service
- Navigate and submit a form
- Save or delete information
- Launch a popup or modal
- Upload or download a file
- Accept terms
Alignment and sort order
It's best to align buttons to the left and sort them from left to right by order of importance. This makes the primary action the one people will see first. English and French are read from left to right, so our users will tend to look to the left side of the screen first. If buttons are aligned to the right, they may be overlooked.
When designing for mobile, we stack buttons from top to bottom by order of importance. Mobile buttons are full-width to help people reach them with one hand, whether they are left or right-handed.
States
Buttons have multiple states that provide feedback to the user at each stage of the interaction. Buttons should include default, hover, focus, active and disabled states:
- Default: The default state of a button is the way it looks when it is not being interacted with.
- Hover: The hover state is how it looks when the user hovers their cursor over the button. This state is used to provide visual feedback to the user that the button is interactive.
- Focus: The focus state is how the button appears when the user has navigated to it using a keyboard or pointing device. This state provides visual feedback that the button is currently selected and ready to receive input.
- Pressed (active): The pressed state is how it looks when the user clicks on or presses down on the button. This state is provides visual feedback to the user that their action has been registered.
- Disabled: The disabled state of a button is the way it appears when it's not clickable or interactive. This state is used to indicate to the user that the button is currently unavailable.
Primary button
Use the primary button to highlight the primary action the user is expected to take. The primary button is the most prominent and visually emphasized button. It is best practice to only use one primary button per screen.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn">Button</button>
<a href="#" class="gnb-btn">Link</a>
Secondary button
Use the secondary button for less important actions, or when you have multiple actions with equal importance.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-secondary">Secondary button</button>
<a href="#" class="gnb-btn-secondary">Secondary button</a>
Tertiary button
Use tertiary buttons for the least important actions.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-tertiary">Tertiary button</button>
<a href="#" class="gnb-btn-tertiary">Tertiary button</a>
Critical primary button
Use a critical primary button only if the primary action is destructive, such as permanently deleting data or an account.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-critical">Critical button</button>
<a href="#" class="gnb-btn-critical">Critical button</a>
Critical secondary button
Use a critical secondary button only if a secondary action is destructive, such as deleting data or quitting a process without saving.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-critical-secondary">Critical secondary</button>
<a href="#" class="gnb-btn-critical-secondary">Critical secondary</a>
Critical tertiary button
Use critical tertiary buttons for the least important actions and reduce emphasis on destructive actions.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-critical-tertiary">Critical tertiary button</button>
<a href="#" class="gnb-btn-critical-tertiary">Critical tertiary button</a>
Start service button
Use this button to start an application process or launch an online service.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn-success">Start now <i class="fa-solid fa-arrow-right"></i></button>
<a class="gnb-btn-success">Start now <i class="fa-solid fa-arrow-right"></i></a>
Disabled button
Use a disabled button when a button must remain disabled until a user completes an action, such as filling out all the required fields in a form. Disabled buttons can be more difficult to read, so they should be avoided where possible. Any button type can be disabled by adding the disabled class.
HTML
<!-- Use <button> if it does something, <a> if it goes somewhere -->
<button type="button" class="gnb-btn disabled">Button</button>
<a href="#" class="gnb-btn disabled">Link</a>
Buttons with icons
Icons can be added to buttons to support the button action. Don’t use an icon by itself. Users may interpret the icon's meaning differently, creating confusion.
HTML
<button type="button" class="gnb-btn">Download <i class="fa-solid fa-file-arrow-down"></i></button>
Button pairings for interactions
Positive primary action
HTML
<!-- Positive and neutral -->
<button type="button" class="gnb-btn">Positive</button>
<button type="button" class="gnb-btn-secondary">Neutral</button>
<!-- Positive and negative -->
<button type="button" class="gnb-btn">Positive</button>
<button type="button" class="gnb-btn-critical-secondary">Negative</button>
<!-- Positive and disabled -->
<button type="button" class="gnb-btn">Positive</button>
<button type="button" class="gnb-btn-secondary disabled" disabled>Disabled</button>
Negative primary action
HTML
<button type="button" class="gnb-btn-critical">Negative</button>
<button type="button" class="gnb-btn-secondary">Neutral</button>
Examples
HTML
<!-- Next and Go back -->
<button type="button" class="gnb-btn">Next</button>
<button type="button" class="gnb-btn-secondary">Go back</button>
<!-- Submit and cancel -->
<button type="button" class="gnb-btn">Submit</button>
<button type="button" class="gnb-btn-secondary">Cancel</button>
<!-- Delete and cancel -->
<button type="button" class="gnb-btn-critical">Delete</button>
<button type="button" class="gnb-btn-secondary">Cancel</button>