Skip to main content

Button

HTML​

<button class="govuk-button lbh-button" data-module="govuk-button">
  Save and continue
</button>

Button secondary​

HTML​

<button
  class="govuk-button govuk-secondary lbh-button lbh-button--secondary"
  data-module="govuk-button"
>
  Secondary button
</button>

Button disabled​

HTML​

<button
  disabled="disabled"
  aria-disabled="true"
  class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled"
  data-module="govuk-button"
>
  Disabled button
</button>

Link button

HTML​

<a
  href="/"
  role="button"
  draggable="false"
  class="govuk-button lbh-button"
  data-module="govuk-button"
>
  Link button
</a>

Disabled link button

HTML​

<a
  href="/"
  role="button"
  draggable="false"
  class="govuk-button lbh-button lbh-button--disabled govuk-button--disabled"
  data-module="govuk-button"
>
  Disabled link button
</a>

Add another​

This button style is helpful for "add another" UI patterns.

Tailor the text inside the button for the thing the user is adding. For instance, "add another person" or "add another address".

HTML​

<button className="govuk-button lbh-button lbh-button--add">
  <svg width="12" height="12" viewBox="0 0 12 12">
    <path d="M6.94 0L5 0V12H6.94V0Z" />
    <path d="M12 5H0V7H12V5Z" />
  </svg>
  Add another item
</button>