Washington State Auditor's Office Communication and Design System

Button: Disabled 

<button disabled class="c-button">
    Default - disabled
</button>

<button disabled class="c-button c-button--primary ">
    Primary - disabled
</button>

<button disabled class="c-button c-button--no-op ">
    Nonoperative - disabled
</button>
 
{% for button in buttons %}
<button disabled class="c-button{% if button.type !== 'default' %} c-button--{{ button.type }} {% endif %}">
    {{ button.text }} - disabled
</button>
{% endfor %}
 
{
  "buttons": [
    {
      "type": "default",
      "text": "Default"
    },
    {
      "type": "primary",
      "text": "Primary"
    },
    {
      "type": "no-op",
      "text": "Nonoperative"
    }
  ]
}
  • Content: 
    .k-button {
    // @extend .c-button;
    // background-image: none;
    text-transform: uppercase;
    font-weight: $font-weight-bold;
}

.k-primary {
    // @extend .c-button--primary;
}
  • URL: /components/raw/button/button.kendo.scss
  • Filesystem Path: src/Components/button/button.kendo.scss
  • Size: 199 Bytes
  • Content: 
    .c-button {
    text-transform: uppercase;
    color: $color-neutral-white;
    padding: $spacing-tiny $spacing-small;
    border: $border-width-base solid $color-neutral-base;
    border-radius: $border-radius-base;
    background-color: $color-neutral-base;
    font-weight: $font-weight-bold;
    cursor: pointer;

    &:hover, &:focus {
        background-color: $color-neutral-white;
        color: $color-neutral-base;
        border-color: $color-neutral-base;
    }
}

.c-button--primary {
    background-color: $color-secondary-base;
    border-color: $color-secondary-base;
    color: $color-neutral-white;

    &:hover, &:focus {
        color: $color-secondary-base;
        border-color: $color-secondary-base;
    }
}

.c-button--no-op {
    border-radius: 0;
    border: 0;
    background-color: $color-secondary-light;
    text-transform: none;

    &:hover, &:focus {
        background-color: $color-secondary-base;
        color: $color-neutral-white;
    }
}

.c-button[disabled],
.c-button--disabled {
    color: $color-neutral-darkest;
    background-color: $color-neutral-base;
    border-color: $color-neutral-base;
    cursor: default;

    &:hover, &:focus {
        color: $color-neutral-darkest;
        background-color: $color-neutral-base;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/Components/button/button.scss
  • Size: 1.3 KB

Button implementations:

You can use any of the frameworks below with this component. Click here for framework integration instructions. Links follow to that framework’s documentation.

Variants

Default Operative Button

Used for de-prioritized selections (eg: cancel, back).

Primary Operative Button

Used for prioritized selections to make a choice, or otherwise changes the state of the application. Examples: “Apply Changes,” “Generate Link,” “OK.”

Non-Operative Button

Used when the button is a CTA for uncovering operative child options, or launching a modal window with further information.

Disabled Button

Use disabled attribute on a button element to disable the button and make it’s action unavailable to the user. You can also use .c-button--disabled to get the styling however the disabled attribute is semantically correct.