Components

Button

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

See the GOV.UK Design System documentation on buttons for more information on when to use this component.

<gv-button href="#">
  Save and continue
</gv-button>

Using `router-link` or `nuxt-link`

You can set up buttons to use router-link or nuxt-link if needed. See Using router-link or nuxt-link for more details.

Save and continue

<script setup lang="ts">
import { NuxtLink } from '#components';
</script>

<template>
  <gv-button :component="NuxtLink" to="/example-page">
    Save and continue
  </gv-button>
</template>

Using a click event handler

You can attach a click event handler instead of setting href.

<script setup lang="ts">
function handleClick() {
  alert('You clicked the button')
}
</script>

<template>
  <gv-button @click="handleClick">
    Save and continue
  </gv-button>
</template>

Start buttons

Set :is-start-button="true" to show a start button.

<gv-button :is-start-button="true">
  Start now
</gv-button>

Secondary and warning buttons

Use the variant prop to change between primary, secondary and warning buttons.

<gv-button variant="secondary">
  Find address
</gv-button>

<gv-button variant="warning">
  Delete account
</gv-button>

Grouping buttons

Wrap buttons in a gv-button-group to display them side-by-side on larger screens or stacked on smaller screens.

<gv-button-group>
  <gv-button>
    Save and continue
  </gv-button>
  <gv-button variant="secondary">
    Save as draft
  </gv-button>
</gv-button-group>

GvButton

Props

Name	Type	Description
text	string	Text for the button or link. If content is provided in the default slot, or if `element` is set to `input`, this prop will be ignored.
name	string	Name for the `input` or `button`. This has no effect if `element` is `a`.
type	string	Type of `input` or `button` - `button`, `submit` or `reset`. This has no effect if `component` is not `input` or `button`. Defaults to `'button'`.
value	string	Value for the `button` tag. This has no effect if `element` is not `button`
disabled	boolean	Whether the button should be disabled. If `element` is `input` or `button`, `disabled` and `aria-disabled` attributes will be set automatically. Defaults to `false`.
href	string	The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
isStartButton	boolean	Use for the main call to action on your service's start page. Defaults to `false`.
variant	string	The prominence of the button. Allowed values: `primary`, `secondary`, `warning`. Defaults to `'primary'`.
id	string	The ID of the button.
component	string\|object	The component used to render the button, for example `RouterLink`. Will default to `a` if an `href` is provided or `button` otherwise.

Slots

Name	Description
default	The content of the button. If content is provided in this slot, the `text` prop will be ignored.

GvButtonGroup

Slots

Name	Description
default	A list of `gv-button`s