Button

Adapted

Button Variants

Primary

The primary button is the default button variant. It is to be used when there is one primary action on a page.

If there are multiple primary actions on a page, use the inverse button variant.

Show code

<div class="govuk-button-group">
  <button type="button" class="govuk-button" data-module="govuk-button">Main action on the page</button>
</div>

---
import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-astro";
---

<ButtonGroup>
  <Button type="button">Main action on the page</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ButtonGroup>
      <Button type="button">Main action on the page</Button>
    </ButtonGroup>
  );
}

<script>
  import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ButtonGroup>
  <Button type="button">Main action on the page</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ButtonGroup>
      <Button type="button">Main action on the page</Button>
    </ButtonGroup>
  );
}

Secondary

The secondary button is to be used when there are two actions, one primary and one secondary. The secondary button should be used alongside the primary button. If there are any more than two actions, use the inverse button variant.

Show code

<div class="govuk-button-group">
  <button type="button" class="govuk-button" data-module="govuk-button">Main action</button>
  <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button">Secondary action</button>
</div>

---
import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-astro";
---

<ButtonGroup>
  <Button type="button">Main action</Button>
  <Button type="button" secondary>Secondary action</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ButtonGroup>
      <Button type="button">Main action</Button>
      <Button type="button">Secondary action</Button>
    </ButtonGroup>
  );
}

<script>
  import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ButtonGroup>
  <Button type="button">Main action</Button>
  <Button type="button">Secondary action</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ButtonGroup>
      <Button type="button">Main action</Button>
      <Button type="button" secondary>Secondary action</Button>
    </ButtonGroup>
  );
}

Tertiary

The tertiary button is to be used when there are multiple actions on a page, or the action does not satisfy the above criteria for a primary or secondary action. You may also want to consider to small buttons below if there are multiple actions on a page.

Show code

<div class="govuk-button-group">
    <button type="button" class="govuk-button govuk-button--tertiary" data-module="govuk-button">Action 1</button>
    <button type="button" class="govuk-button govuk-button--tertiary" data-module="govuk-button">Action 2</button>
    <button type="button" class="govuk-button govuk-button--tertiary" data-module="govuk-button">Action 3</button>
    <button type="button" class="govuk-button govuk-button--tertiary" data-module="govuk-button">Action 4</button>
    <button type="button" class="govuk-button govuk-button--tertiary" data-module="govuk-button">Action 5</button>
</div>

---
import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-astro";
---

<ButtonGroup>
    <Button tertiary type="button">Action 1</Button>
    <Button tertiary type="button">Action 2</Button>
    <Button tertiary type="button">Action 3</Button>
    <Button tertiary type="button">Action 4</Button>
    <Button tertiary type="button">Action 5</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ButtonGroup>
        <Button tertiary type="button">Action 1</Button>
        <Button tertiary type="button">Action 2</Button>
        <Button tertiary type="button">Action 3</Button>
        <Button tertiary type="button">Action 4</Button>
        <Button tertiary type="button">Action 5</Button>
    </ButtonGroup>
  );
}

<script>
  import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ButtonGroup>
    <Button type="button" tertiary>Action 1</Button>
    <Button type="button" tertiary>Action 2</Button>
    <Button type="button" tertiary>Action 3</Button>
    <Button type="button" tertiary>Action 4</Button>
    <Button type="button" tertiary>Action 5</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ButtonGroup>
        <Button type="button" tertiary>Action 1</Button>
        <Button type="button" tertiary>Action 2</Button>
        <Button type="button" tertiary>Action 3</Button>
        <Button type="button" tertiary>Action 4</Button>
        <Button type="button" tertiary>Action 5</Button>
    </ButtonGroup>
  );
}

Inverse buttons

Iverse buttons are to replace the primary buttons when on a dark background. The secondary and tertiary buttons are designed to work as usual on a dark background.

Show code

<div class="govuk-button-group">
    <button type="button" class="govuk-button govuk-button--inverse" data-module="govuk-button">Primary action</button>
</div>

---
import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-astro";
---

<ButtonGroup>
    <Button type="button" inverse>Primary action</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ButtonGroup>
        <Button type="button" inverse>Primary action</Button>
    </ButtonGroup>
  );
}

<script>
  import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ButtonGroup>
    <Button inverse type="button">Primary action</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ButtonGroup>
        <Button inverse type="button">Primary action</Button>
    </ButtonGroup>
  );
}

Small buttons

Small buttons are to be used when there is a need for a smaller button, such as in a toolbar or when space is limited. Small buttons can be used with any of the button variants.

Show code

<div class="govuk-button-group">
  <button type="button" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Edit</button>
  <button type="button" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Export</button>
  <button type="button" class="govuk-button govuk-button--tertiary govuk-button--small" data-module="govuk-button">Download</button>
  <button type="button" class="govuk-button govuk-button--small" data-module="govuk-button">Save</button>
</div>

---
import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-astro";
---

<ButtonGroup>
  <Button tertiary type="button" small>Edit</Button>
  <Button tertiary type="button" small>Export</Button>
  <Button tertiary type="button" small>Download</Button>
  <Button type="button" small>Save</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ButtonGroup>
      <Button tertiary type="button" small>Edit</Button>
      <Button tertiary type="button" small>Export</Button>
      <Button tertiary type="button" small>Download</Button>
      <Button type="button" small>Save</Button>
    </ButtonGroup>
  );
}

<script>
  import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ButtonGroup>
  <Button type="button" tertiary small>Edit</Button>
  <Button type="button" tertiary small>Export</Button>
  <Button type="button" tertiary small>Download</Button>
  <Button type="button" small>Save</Button>
</ButtonGroup>

import { Button, ButtonGroup } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ButtonGroup>
      <Button tertiary type="button" small>Edit</Button>
      <Button tertiary type="button" small>Export</Button>
      <Button tertiary type="button" small>Download</Button>
      <Button type="button" small>Save</Button>
    </ButtonGroup>
  );
}