GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find 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 or external sites.

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
2025-05-06