Buttons

Guidelines

Disabled buttons have poor contrast and can confuse some users, so avoid them if possible. Only use disabled buttons if research shows it makes the user interface easier to understand.

https://design-system.service.gov.uk/components/button/#disabled-buttons

Secondary buttons should be avoided when possible. Some users can find confusing the differences between primary and seconday buttons. In general we recommend using only one call to action on a page, styled as our green button.

https://github.com/alphagov/govuk-design-system-backlog/issues/34#issuecomment-407407825

To do

  • Mobile styling.
<!-- Default -->
<button class="lbh-button" type="submit">
    Save and continue
  </button>

<!-- Disabled -->
<button class="lbh-button" type="submit" disabled aria-disabled="true">
    Disabled button
  </button>

<!-- Link -->
<a href="#" role="button" class="lbh-button lbh-button--arrow">
    Start now link button
    <svg class="lbh-icon--arrow" height="20" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M16 10.417h-6L0 .917h6z" fill="#fff"/><path d="M0 19.917h6l10-9.5h-6z" fill="#96ccae"/></g></svg>
  </a>

<!-- Link Disabled -->
<a href="#" role="button" class="lbh-button lbh-button--arrow lbh-button--disabled">
    Disabled link button
    <svg class="lbh-icon--arrow" height="20" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M16 10.417h-6L0 .917h6z" fill="#fff"/><path d="M0 19.917h6l10-9.5h-6z" fill="#96ccae"/></g></svg>
  </a>

<!-- Input -->
<input value="Start now input button" class="lbh-button" type="submit">

<!-- Input Disabled -->
<input value="Disabled input button" class="lbh-button" type="submit" disabled aria-disabled="true">

<!-- Secondary -->
<button class="lbh-button lbh-button--secondary" type="submit">
    Secondary button
  </button>

<!-- Secondary Disabled -->
<button class="lbh-button lbh-button--secondary" type="submit" disabled aria-disabled="true">
    Secondary button disabled
  </button>

  • Content:
    .lbh-button {
        background-color: var(--background-button);
        color: var(--colour-button);
        border: 2px solid transparent;
        text-decoration: none;
        cursor: pointer;
        padding: 9px 12px 6px;
        line-height: 1;
        box-shadow: 0 2px 0 var(--shadow-button);
        display: inline-block;
        margin-bottom: calc(var(--spacing-main) * 2);
        position: relative;
        font-size: 100%;
    }
    
    .lbh-button--secondary {
        border: 2px solid var(--background-button);
        background-color: var(--background-button-secondary);
        color: var(--colour-main);
    }
    
    .lbh-button:before {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        right: -2px;
        bottom: -4px;
        left: -2px;
        background: transparent;
    }
    
    .lbh-button[disabled],
    .lbh-button--disabled {
        background-color: var(--background-button-disabled);
        box-shadow: 0 2px 0 var(--shadow-button-disabled);
        cursor: default;
    }
    
    .lbh-button[disabled].lbh-button--secondary,
    .lbh-button--disabled.lbh-button--secondary {
        background-color: var(--background-button-secondary-disabled);
    }
    
    .lbh-button--arrow {
        font-weight: 700;
        padding: 12px 42px 8px 16px;
    }
    
    .lbh-button--arrow .lbh-icon--arrow {
        width: 16px;
        height: 20px;
        position: absolute;
        right: var(--spacing-main);
        top: 10px;
    }
    
    .lbh-button--secondary .lbh-icon--arrow path:first-child {
        fill: var(--colour-main);
    }
    
    .lbh-button:not([disabled]):not(.lbh-button--disabled):hover {
        background-color: var(--hover-button);
    }
    
    .lbh-button--secondary:not([disabled]):not(.lbh-button--disabled):hover {
        background-color: var(--hover-button-secondary);
    }
    
    .lbh-button:not([disabled]):not(.lbh-button--disabled):focus {
        outline: 3px solid var(--focus-button);
        outline-offset: 0;
    }
    
    .lbh-button:not([disabled]):not(.lbh-button--disabled):active {
        top: 2px;
        box-shadow: none;
    }
    
    .lbh-button:not([disabled]):not(.lbh-button--disabled):active:before {
        top: -4px;
    }
  • URL: /components/raw/buttons/buttons.css
  • Filesystem Path: components/02-atoms/01-buttons/buttons.css
  • Size: 2 KB