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>

Button link

Link button

HTML

<a

href="/"

role="button"

draggable="false"

class="govuk-button lbh-button"

data-module="govuk-button"

>

Link button

</a>

Button link disabled

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>