Design System

Button

Basic buttons.

Sass Mixin

@mixin button()

Parameters

None.

<!-- Default -->
<button class="button">Plain</button>
<button class="button -primary">Primary</button>
<button class="button -secondary">Secondary</button>
<button class="button -danger">Danger</button>
<button class="button -confirm">Confirm</button>
<button disabled class="button -disabled">Disabled</button>


<!-- Ghost -->
<button class="button -ghost">Plain</button>
<button class="button -ghost -primary">Primary</button>
<button class="button -ghost -secondary">Secondary</button>
<button class="button -ghost -danger">Danger</button>
<button class="button -ghost -confirm">Confirm</button>
<button disabled class="button -ghost -disabled">Disabled</button>


<!-- Outline -->
<button class="button -outline">Plain</button>
<button class="button -outline -primary">Primary</button>
<button class="button -outline -secondary">Secondary</button>
<button class="button -outline -danger">Danger</button>
<button class="button -outline -confirm">Confirm</button>
<button disabled class="button -outline -disabled">Disabled</button>
  • Content: 
    ///
/// A basic button mixin.
///
/// $color
///     button color
/// $text-color
///     button label color
/// $hover-color
///     button hover color
/// $disabled-color
///     disabled button color
///
@mixin button (
    $color: $gray-400,
    $text-color: $white,
    $hover-color: $link-hover
) {
    background-color: $color;
    border: none;
    color: $text-color;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    padding: 0.618em 1.618em;
    text-align: center;
    transition: box-shadow $fast $fade-easing,
        background-color $fast $fade-easing,
        color $fast $fade-easing;
    vertical-align: top;

    &:hover,
    &:focus {
        color: $text-color;
        box-shadow: 0 0 0 2px inset $color, 0 0 0 4px inset $white;
        outline: none;
    }

    &[disabled] {
        pointer-events: none;
    }

    @include color-modifiers using ($color) {
        background-color: $color;
        color: blackwhite($color);
        font-weight: bold;

        &:hover,
        &:focus {
            box-shadow: 0 0 0 2px inset $color, 0 0 0 4px inset $white;
        }
    }

    &.-disabled {
        color: $white;
        pointer-events: none;
    }


    &.-outline {
        box-shadow: 0 0 0 2px inset;
        color: $color;
        background-color: transparent;

        &:hover,
        &:focus {
            color: $text-color;
            box-shadow: 0 0 0 2px inset $color;
            background-color: $color;
            outline: none;
        }

        @include color-modifiers using ($color) {
            box-shadow: 0 0 0 2px inset $color;
            color: $color;

            &:hover,
            &:focus {
                color: $text-color;
                background-color: $color;
            }
        }
    }

    &.-ghost {
        background-color: transparent;
        color: $color;

        &:hover,
        &:focus {
            background-color: rgba($color, .1);
            box-shadow: none;
        }

        @include color-modifiers using ($color) {
            color: $color;

            &:hover,
            &:focus {
                background-color: rgba($color, .1);
            }
        }
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: resources/styles/atoms/button/button.scss
  • Size: 2.2 KB