---
id: button
title: Button
---

# Button

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

## How to use


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

<code src="@digigov/ui/src/form/Button/__stories__/Primary.tsx" />

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

### Start button - Call To Action

Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.

<code src="@digigov/ui/src/form/Button/__stories__/CallToActionButton.tsx" />

### Secondary color

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

<code src="@digigov/ui/src/form/Button/__stories__/Secondary.tsx" />

### Warning color

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

<code src="@digigov/ui/src/form/Button/__stories__/Warning.tsx" />

### Link variant

<code src="@digigov/ui/src/form/Button/__stories__/WithVariantLink.tsx" />

### Disabled

Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.

<code src="@digigov/ui/src/form/Button/__stories__/Disabled.tsx" />

### Dense 

<code src="@digigov/ui/src/form/Button/__stories__/Dense.tsx" />

### Grouping buttons

Use a button group when two or more buttons are placed together.

<code src="@digigov/ui/src/form/Button/__stories__/GroupingButtons.tsx" />

Any links within a button group will automatically align with the buttons.

<code src="@digigov/ui/src/form/Button/__stories__/GroupingButtonsAndLinks.tsx" />

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

- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
- `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.

## More buttons

### Back link button

<code src="@digigov/ui/src/form/Button/__stories__/Back.tsx" />


### Theme toggle button

<code src="@digigov/ui/src/form/Button/__stories__/ThemeToggle.tsx" />


## Accessibility

You can read more about the accessibility patterns used in our Button
implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} />