Button
<gcds-button>

Also called: call to action, CTA.

The button is an interactive object that emphasizes an action.

• GitHub
• Figma

Build a button

Use a button to initiate important actions.

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.

Get your code

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.