GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Button
<gcds-button>

Also called: call to action, CTA. The button is an interactive object that emphasizes an action.
  • GitHub
  • Figma

Button component preview

On this page

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.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation.

button-id

Use button-id to set the id for a button. 
<gcds-button id="submit-ei-application">Submit</gcds-button>

button-role

Use button-role to set the main style for a button. Choose from:
  • 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

Set disabled to true to make the button non-interactive. By default, disabled is set to false. 
<gcds-button button-role="danger" disabled="true">
  Delete
</gcds-button>

name

Use name to specify the name of the button when submitting form data. This attribute helps identify 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

Use size to set the button size. Choose from:
  • regular (default)
  • small
<gcds-button>Default size</gcds-button>
<gcds-button size="small">Small size</gcds-button>

type

Use type to define the button’s function. Choose from:
  • 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

Use value to define the data sent to the server when the button submits a form. The button only sends this value if it has a name attribute and if it triggered the submission. If multiple submit buttons exist, only the clicked button 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

Use download to make the button download the file referenced by the href attribute, rather than navigate 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="true">
  Download receipt
</gcds-button>

href

Use href to define 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

Use rel to specify the relationship between the current document and the linked document. Use it 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

Use target to specify where the linked resource opens: 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>

Slots

The default slot allows you to inject custom content into the component’s primary content area, and named slots, into specific areas.

default

Use the default slot to add 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.
  • Explore by choosing different code values to generate the instance you want.
  • Get the code and pull it into your environment.
  • 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. Start
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-07-08