Button

When to use this component

A button is used to trigger an action.

When not to use this component

Do not use a button to trigger navigation. In this case, use a link.

Web accessibility

  • A button should always look like a button.
  • State changes cannot be indicated by color alone.
<button
  type="button"
  class="button {{ 'button-' ~ type }} {{ modifier }} {% if icon %}button-icon{% endif %}"
  {% if disabled %}
    disabled
  {% endif %}
>
  {{ text }}
</button>
<button type="button" class="button button-primary button-large ">
    Button-large
</button>
{
  "text": "Button-large",
  "type": "primary",
  "modifier": "button-large",
  "disabled": null
}
  • Content:
    ////
    ///
    /// This file defines the bulk of all button styling.
    ///
    /// @group buttons
    /// @author Gert-Jan Meire
    ///
    ////
    
    ///
    /// Button - small variant.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button-small {
      @include small-text;
    
      min-height: 1.9rem;
      letter-spacing: .02em;
    }
    
    ///
    /// Button - medium variant.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button-medium {
      @include medium-text;
    
      min-height: 2.2rem;
      letter-spacing: .025em;
    }
    
    ///
    /// Button - large variant.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button-large {
      @include large-text;
    
      min-height: 2.5rem;
      letter-spacing: .03em;
    }
    
    ///
    /// Button - disabled variant.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    /// @require color
    ///
    @mixin button-disabled {
      [class*='cs--'] & {
        border: 0;
        background-color: color('dark-gray', -3);
        color: color('white');
        box-shadow: none;
    
        &:hover {
          background-color: color('dark-gray', -3);
          color: color('white');
          box-shadow: none;
          cursor: not-allowed;
        }
      }
    }
    
    ///
    /// General button styling.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button {
      @include button-medium; // Default.
      @include bold-text;
    
      padding: 0 2.6em;
      transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
      border: 2px solid;
      border-radius: border-radius('radius-1');
      outline: 0;
      font-family: $default-font-family;
      text-align: center;
      cursor: pointer;
    
      &:disabled {
        @include button-disabled;
      }
    
      &.button-small {
        @include button-small;
      }
    
      &.button-medium {
        @include button-medium;
      }
    
      &.button-large {
        @include button-large;
      }
    
      &.button-block {
        @include button-block;
      }
    
      &[class*="icon-"] {
        @include button-icon;
      }
    }
    
    ///
    /// Makes a button display block instead of inline.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button-block {
      display: inline-block;
      width: 100%;
    }
    
    ///
    /// Define a button with an icon.
    ///
    /// @since 3.0.0
    /// @group buttons
    /// @access public
    /// @author Gert-Jan Meire
    ///
    @mixin button-icon {
      display: inline-flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      padding: 0 .8em 0 1.2em;
      line-height: 1.8em;
      text-align: left;
    
      // Padding fix specificly for IE11.
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
        padding: .3em .8em 0 1.2em;
        line-height: 1.6;
      }
    
      &::before {
        order: 2;
        margin-left: .5rem;
        // Fix for IE11 flex order property.
        float: right;
        font-size: 1.8em;
    
        // Font-size specificly for IE11.
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // sass-lint:disable-line no-vendor-prefixes
          font-size: 1.2rem;
        }
      }
    
      &::after {
        padding-right: .2rem;
        content: '';
      }
    }
    
    .button,
    input[type="button"],
    input[type="submit"] {
      @include button;
    
      -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
    }
    
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: components/21-atoms/button/_button.scss
  • Size: 3.3 KB