Button

Use Button for actions.

When to use it

Navigating to another page. Use a link, so middle-click, right-click and browser history behave as the user expects.

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

Rendered

HTML

<button class="gov-button gov-button--primary gov-button--md" type="button">Save</button>

{
  "children": "Save"
}

Rendered

HTML

<button class="gov-button gov-button--secondary gov-button--md" type="button">Cancel</button>

{
  "variant": "secondary",
  "children": "Cancel"
}

Rendered

HTML

<button class="gov-button gov-button--danger gov-button--md" type="button">Delete</button>

{
  "variant": "danger",
  "children": "Delete"
}

Rendered

HTML

<button class="gov-button gov-button--primary gov-button--sm" type="button">Filter</button>

{
  "size": "sm",
  "children": "Filter"
}

Rendered

HTML

<button class="gov-button gov-button--primary gov-button--md" type="button" disabled>Save</button>

{
  "attributes": {
    "disabled": true
  },
  "children": "Save"
}

Rendered

HTML

<button class="gov-button gov-button--primary gov-button--md" type="submit">Save</button>

{
  "attributes": {
    "type": "submit"
  },
  "children": "Save"
}

Variants
Prop	Values	Default
`variant`	`primary`, `secondary`, `danger`	`primary`
`size`	`sm`, `md`	`md`

Accessible name. Visible text content. An icon-only button requires aria-label.

Keyboard behavior
Key	Behavior
`Enter`	Activates the button.
`Space`	Activates the button.

Uses the native button element so browser keyboard behavior and form participation stay predictable.
type defaults to button, not submit, so a button inside a form does not submit it by accident.
Disabled buttons leave the tab order. Where the reason for disabling is not obvious, prefer an enabled button that explains the problem on activation.

View the manifest for this component: packages/manifest/components/button.json