Button
<gcds-button>

Also called: call to action, CTA.

The button is an interactive object that emphasizes an action.

• GitHub
• Figma

On this page

• Coding and accessibility for buttons
• Examples
• Code builder

Coding and accessibility for buttons

Check for visual accessibility

Check the button border's visibility against the surface where you're placing it.

Select the right size

Use the small button attribute for actions when space is limited.

Note: The height of small buttons is WCAG AA compliant, but not AAA compliant.

Use disabled button sparingly

• Use the disabled button sparingly when something needs to be done before an action can be initiated.
• Where possible, use other interventions like an error message to block incomplete form submissions.

In this section

• Optional attributes
• Slots

button-id

The button-id attribute specifies the id for a button.

<gcds-button id="submit-ei-application">
  Submit
</gcds-button>

button-role

The button-role attribute sets the main style for a button. The available options are:

• primary (default)
• secondary
• danger
• start

<gcds-button button-role="start">Start</gcds-button>
<gcds-button>Submit</gcds-button>
<gcds-button button-role="secondary">Cancel</gcds-button>
<gcds-button button-role="danger">Delete</gcds-button>

disabled

The disabled attribute is a boolean that controls whether a button is interactive or not.

<gcds-button button-role="danger" disabled>
  Delete
</gcds-button>

name

The name attribute specifies the name of the button when submitting form data. It is useful for identifying which button triggered a form submission, especially when multiple buttons exist in a form.

<form action="..." method="post">
  <gcds-button button-role="secondary" name="save-draft" type="submit">Save draft</gcds-button>
  <gcds-button button-role="secondary" name="submit-application" type="submit">Submit application</gcds-button>
</form>

size

The size attribute sets the button size. The available options are:

• regular (default)
• small

<gcds-button>Default size</gcds-button>
<gcds-button size="small">Small size</gcds-button>

type

The type attribute defines the button's function. The available options are:

• button (default)
• link
• reset
• submit

<gcds-button>Button</gcds-button>
<gcds-button type="link">Link</gcds-button>
<gcds-button type="reset">Reset</gcds-button>
<gcds-button type="submit">Submit</gcds-button>

value

The value attribute defines the data that will be sent to the server when the button is used to submit a form. This value is only included if the button has a name attribute and was the one that triggered the submission. If multiple submit buttons exist, only the clicked one sends its value.

<form action="..." method="post">
  <gcds-button button-role="secondary" type="submit" name="applicationAction" value="save">Save draft</gcds-button>
  <gcds-button button-role="secondary" type="submit" name="applicationAction" value="submit">Submit application</gcds-button>
</form>

download

The download attribute specifies that activating the button will download the file referenced by the href attribute, rather than navigating to it.

This attribute is only supported when the button type is set to link.

<gcds-button type="link" href="/files/application-receipt.pdf" download>
  Download receipt
</gcds-button>

href

The href attribute defines the destination of the link.

This attribute is only supported when the button type is set to link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html">
  View benefits information
</gcds-button>

rel

The rel attribute specifies the relationship between the current document and the linked document. It is commonly used for security and privacy purposes, especially when links open in a new tab or window.

This attribute is only supported when the button type is set to link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html" target="_blank" rel="noopener noreferrer">
  View benefits information
</gcds-button>

target

The target attribute specifies where the linked resource is opened. For example, it can open the link in the same browsing context or in a new tab or window.

This attribute is only supported when the button type is set to link.

<gcds-button type="link" href="https://www.canada.ca/en/services/benefits.html" target="_blank" rel="noopener noreferrer">
  View benefits information
</gcds-button>

default

The default slot is for adding the button or link label text.

<gcds-button>Submit</gcds-button>

Code builder

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.