Washington State Auditor's Office Communication and Design System

Button: Default 

<button class="c-button">
    Default Button
</button>
 
<button class="c-button">
    {{ text }}
</button>
 
{
  "text": "Default Button"
}
  • 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.