---
title: Button
description: 'Buttons are used to indicate an action. Button labels express what action will occur when the user interacts with it.'
layout: page
label: Core
links:
  - text: Figma
    url: https://www.google.com/
  - text: Vue component
    url: https://www.google.com/
---

## Usage

Buttons are used in components and in body sections of a page. Buttons are used in components and in body sections of a page.

::DocsExample
---
id: core-navigation-button--default-filled
---
::

### When to use

- Do use to highlight key call to actions.
- Do link to internal pages or to external websites.
- Do add to any basic content component.
- Do use verbs in the button text (e.g. Submit now, Cancel booking).

### When not to use

- Do not use more than one primary button in a paragraph
- Do not use more than 4 words in the button text

## Variants

### Filled

The filled variant is the primary button that can be used. 

::DocsExample
---
id: core-navigation-button--default-filled
---
::

### Outlined

The outlined variant is used for secondary actions across the site. 

::DocsExample
---
id: core-navigation-button--default-outlined
---
::

### White

The white variant is used for tertiary actions across the site. It has been styled with an underline on default to align with links to help meet accessibility requirements and consistency for links across the site. 

::DocsExample
---
id: core-navigation-button--default-white
---
::

### Elevated

The elevate variant is used as the back to top button on the site. Elevation has been added to show the z-index of the button when in use. 

::DocsExample
---
id: core-navigation-button--default-elevated
---
::

### Destructive

The destructive variant is used for destructive actions across the site. 

::DocsExample
---
id: core-navigation-button--default-destructive
---
::


## Rationale

Research and work that informed the creation of this component, including usability and accessibility considerations.

## Theming

::DocsThemeChooser
  ::DocsExample
  ---
  id: core-navigation-button--default-filled
  ---
  ::
  ::DocsExample
  ---
  id: core-navigation-button--default-outlined
  ---
  ::
  ::DocsExample
  ---
  id: core-navigation-button--default-elevated
  ---
  ::
::


## Neutral Variants

The buttons have the option to be used in a neutral theme. This is set at a site level, and if this option is chosen, the primary button is the outline variant, and the 

::DocsExample
---
id: core-navigation-button--neutral-outlined
---
::
