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

Take a look at what buttons do to see if they fit the problem you’re solving for. Then select the best subtype, called the button role, for the use case you need to meet.

Problems buttons solve

Use a button to initiate an action, like:
  • Start a task or flow.
  • Submit, save, or delete form data.
  • Make a choice or give consent.
  • Sign in to an account.
  • Move forward or back in a sequence.
Links to navigate to a new page, website, file, or section on the current page. Details to hide or show a section of content.

Choose a button type

The button type changes the HTML to do a specific task. Pick the type based on the function you need.

Button type

Use the button type when you’re expecting a person to:
  • Delete, copy, or download information.
  • Make a binary choice.
  • Give consent or agreement.

Submit type

Use the submit type when you’re expecting a person to:
  • Send a form or a request.
  • Save information.
  • Sign in or sign out of an account.

Reset type

Use the reset type when you’re expecting a person to:
  • Clear data entered on a form.
Tip: Use the reset type sparingly as it’s a destructive action. Use the link type when you’re expecting a person to:
  • Navigate to other pages.
  • Navigate to external sites. An external icon appears at the end of external links.
Note: Use the link component when you need to embed a link in paragraph text or navigation bars.

Choose a button role

The button role changes the styling of a button to visually signal its action. Pick the role that best fits the action.

Primary button preview

Submit

Primary button

  • Critical actions in a flow or as the default button.
  • Only use a single time.

Note: More than one main call to action on the same page makes it harder for a person to know what to do next.

Start button preview

Start

Start button

Formerly called supertask button.

  • The start of a task or flow.
  • Bigger than other buttons, so use by itself and not beside other buttons.
  • Only use once on a page.

Tip: Use either primary button or start button on a page, not both.

Secondary button preview

Cancel

Secondary button uses

  • Supporting actions.
  • To highlight a common action but not the most important one.
  • Can use more than once on a page if there are multiple secondary options.

Danger button preview

Delete

Danger button uses

  • Serious actions like removing, clearing, or deleting information.
  • Changes that may be difficult to reverse.

Tip: For permanent actions, ask a second time so a person explicitly agrees before accepting.
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