Button

Preview

import { Button } from '@govtech-bb/react';

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="text">Text</Button>

<button class="govbb-button" type="button">Primary</button>
<button class="govbb-button govbb-button--secondary" type="button">
  Secondary
</button>
<button class="govbb-button govbb-button--tertiary" type="button">
  Tertiary
</button>
<button class="govbb-button govbb-button--ghost" type="button">Ghost</button>
<button class="govbb-button govbb-button--text" type="button">Text</button>

The Button component lets users initiate an action, such as submitting a form, starting an application, or saving their information. The label on a button describes the action it performs.

Usage

Best practices

Write button text in sentence case.

Variants

Use the secondary button for actions that sit alongside the primary one but are less important. Use the tertiary button for the least prominent actions.

Use the ghost button for an action that must not compete with the buttons around it, such as Cancel beside a primary button or the Menu control in the header. It carries no fill or outline, only an underlined label, but it keeps the same box as the other variants, so a row of mixed buttons lines up and the target stays full size.

Use the text button only where there is no room for that box, such as Remove in a table cell or a list row. It is the ghost button without its padding, so it sits flush with the text around it.

Both are still buttons: use them for actions, and use a link for navigation.

import { Button, ButtonGroup } from '@govtech-bb/react';

<ButtonGroup>
  <Button>Save and continue</Button>
  <Button variant="ghost">Cancel</Button>
</ButtonGroup>
<p>
  passport.pdf <Button variant="text">Remove</Button>
</p>

<div class="govbb-button-group">
  <button class="govbb-button" type="button">Save and continue</button>
  <button class="govbb-button govbb-button--ghost" type="button">Cancel</button>
</div>
<p>
  passport.pdf
  <button class="govbb-button govbb-button--text" type="button">Remove</button>
</p>

Use LinkButton when navigation is the primary call to action. It remains a semantic link and also supports external when a separate service must open in a new tab.

import { LinkButton } from '@govtech-bb/react';

<LinkButton href="https://www.gov.bb/" external>
  Start on an external service
</LinkButton>;

<a
  class="govbb-button"
  href="https://www.gov.bb/"
  target="_blank"
  rel="noopener noreferrer"
>
  Start on an external service
</a>

Destructive actions

Add the negative modifier to a primary, ghost or text button when the action destroys data or cannot be undone, such as deleting a record. It is a warning, not a substitute for confirmation: pair it with a step that lets the user check what they are about to lose. Do not use it for ordinary actions, because a page full of red buttons stops reading as a warning.

import { Button } from '@govtech-bb/react';

<Button negative>Delete application</Button>
<Button variant="text" negative>Remove file</Button>

<button class="govbb-button govbb-button--negative" type="button">
  Delete application
</button>
<button
  class="govbb-button govbb-button--text govbb-button--negative"
  type="button"
>
  Remove file
</button>

Buttons on dark backgrounds

Add the inverse modifier when a button sits on a dark or brand-coloured surface, such as a hero panel. It flips the primary button to a white fill with brand-blue text, and turns the tertiary, ghost and text variants white so they stay visible. The surrounding surface must supply the dark background: the modifier only recolours the button.

import { Button } from '@govtech-bb/react';

<Button inverse>Start now</Button>
<Button variant="tertiary" inverse>Find out more</Button>

<button class="govbb-button govbb-button--inverse" type="button">
  Start now
</button>
<button
  class="govbb-button govbb-button--tertiary govbb-button--inverse"
  type="button"
>
  Find out more
</button>

Client-side routing

LinkButton accepts an href-compatible router component through linkComponent, so a start button can navigate without a full page load. The router renders the same markup a plain link-button does.

import NextLink from 'next/link';
import { LinkButton } from '@govtech-bb/react';

<LinkButton linkComponent={NextLink} href="/apply/">
  Start now
</LinkButton>;

<a class="govbb-button" href="/apply/">Start now</a>

Disabled buttons

Avoid disabling buttons wherever possible. A disabled button gives the user no information about what they need to do to enable it. Prefer keeping the button active and showing an error when the user tries to continue.

import { Button } from '@govtech-bb/react';

<Button disabled>Submit application</Button>;

<button class="govbb-button" type="button" disabled>Submit application</button>

A link cannot take the disabled attribute, so a LinkButton that must appear unavailable uses aria-disabled="true" instead. That styles it as disabled and announces it as such, but the link still works: stop the navigation in your own handler.

Grouping buttons

When a page offers more than one action at the same point, wrap them in a govbb-button-group. It lays out the actions in a row with a consistent gap, wrapping on narrow screens. Put the primary action first, and use secondary or tertiary buttons for the rest. A text link, such as Cancel, can sit in the group alongside the buttons.

For Back and Continue navigation in a question flow, follow the single-question page template, which places Back before Continue.

<div class="govbb-button-group">
  <button class="govbb-button" type="button">Save and continue</button>
  <button class="govbb-button govbb-button--secondary" type="button">
    Save as draft
  </button>
  <a class="govbb-link" href="/service/">Cancel</a>
</div>

Add the govbb-button-group--vertical modifier to stack the actions and stretch each one to the full width of the group, for narrow layouts or full-width action stacks, such as accept and reject choices on mobile.

import { Button, ButtonGroup } from '@govtech-bb/react';

<ButtonGroup>
  <Button>Save and continue</Button>
  <Button variant="secondary">Save as draft</Button>
  <a className="govbb-link" href="/service/">
    Cancel
  </a>
</ButtonGroup>;

<div class="govbb-button-group govbb-button-group--vertical">
  <button class="govbb-button" type="button">Accept</button>
  <button class="govbb-button govbb-button--secondary" type="button">
    Reject
  </button>
</div>