Related components
Links to navigate to a new page, website, file, or section on the current page.
Details to hide or show a section of content.
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.
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.
Link type
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
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 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
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
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