Button

Use the button component to help users carry out an action like starting an application or saving their information.

When to use this component

Use the button component to help users carry out an action like starting an application or saving their information.

How it works

Write button text in sentence case, describing the action it performs. For example:

• ‘Start now’ at the start of the service
• ‘Sign in’ to an account a user has already created
• ‘Continue’ when the service does not save a user’s information
• ‘Save and continue’ when the service does save a user’s information
• ‘Save and come back later’ when a user can save their information and come back later
• ‘Add another’ to add another item to a list or group
• ‘Pay’ to make a payment
• ‘Confirm and send’ on a check answers page that does not have any legal content a user must agree to
• ‘Accept and send’ on a check answers page that has legal content a user must agree to
• ‘Sign out’ when a user is signed in to an account
• You may need to include more or different words to better describe the action. For example, ‘Add another address’ and ‘Accept and claim a tax refund’.

Align the primary action button to the left edge of your form.

Primary buttons

Use a primary button for the main call to action on a page.

Avoid using multiple primary buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

Example

Sample HTML Code

<button type="button" class="govcy-btn-primary">Primary</button>

Secondary buttons

Use secondary buttons for secondary calls to action on a page.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.

Example

Sample HTML Code

<button type="button" class="govcy-btn-secondary">Secondary</button>