Government of British ColumbiaGovernment of British Columbia

DevHub

beta
Resource Information

Status

Last Updated: March 28, 2019

Disabled buttons

A button that can’t be clicked and doesn’t react to hover. A disabled button is greyed out to indicate to users that they cannot undertake the action associated with it. This is usually for page logic reasons.

Example

Design Guidance

  • Before using a disabled button, make sure your research proves it makes the user interface easier to understand.
  • Disabled buttons block users from accomplishing their task without telling them what is wrong. Rather than disabling a button, keep it enabled and show an error message why they can’t proceed.

Accessibility

Screen Readers

”Aria-disabled=true”

“Aria-disabled” tells screen readers that the button is visible but disabled

Behaviour

  1. Add the CSS “not-allowed” cursor property to indicate the action is disabled

cursor:not-allowed;

This supports WCAG 2.0 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Code

HTML

    <button class="BC-Gov-PrimaryButton-disabled" type="button" aria-disabled="true" name="button" disabled>Submit</button>
    <button class="BC-Gov-SecondaryButton-disabled" type="button" aria-disabled="true" name="button" disabled>Cancel</button>

CSS

.BC-Gov-PrimaryButton-disabled {
    background-color: #003366;
    opacity: 0.3;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 12px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: not-allowed;
}

.BC-Gov-SecondaryButton-disabled {
    background-color: white;
    opacity: 0.3;
    border: 2px solid #003366;
    border-radius: 4px;
    color: #003366;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: not-allowed;
}