Button

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>
<!-- Primary Button Small -->
<button type="button" class="button button-primary button-small ">
    Button-small
</button>

<!-- Primary Button Default -->
<button type="button" class="button button-primary  ">
    Button-default
</button>

<!-- Primary Button Large -->
<button type="button" class="button button-primary button-large ">
    Button-large
</button>

<!-- Primary Icon Download -->
<button type="button" class="button button-primary icon-download ">
    Icon-download
</button>

<!-- Primary Disabled -->
<button type="button" class="button button-primary  " disabled>
    Disabled
</button>

<!-- Primary Button Block -->
<button type="button" class="button button-primary button-block ">
    Button-block
</button>

<!-- Primary Button Block Icon Download -->
<button type="button" class="button button-primary button-block icon-download ">
    Button-block icon-download
</button>

<!-- Secondary Button Small -->
<button type="button" class="button button-secondary button-small ">
    Button-small
</button>

<!-- Secondary Button Default -->
<button type="button" class="button button-secondary  ">
    Button-default
</button>

<!-- Secondary Button Large -->
<button type="button" class="button button-secondary button-large ">
    Button-large
</button>

<!-- Secondary Icon Download -->
<button type="button" class="button button-secondary icon-download ">
    Icon-download
</button>

<!-- Secondary Disabled -->
<button type="button" class="button button-secondary  " disabled>
    Disabled
</button>

<!-- Secondary Button Block -->
<button type="button" class="button button-secondary button-block ">
    Button-block
</button>

<!-- Secondary Button Block Icon Download -->
<button type="button" class="button button-secondary button-block icon-download ">
    Button-block icon-download
</button>

<!-- Alert Button Small -->
<button type="button" class="button button-alert button-small ">
    Button-small
</button>

<!-- Alert Button Default -->
<button type="button" class="button button-alert  ">
    Button-default
</button>

<!-- Alert Button Large -->
<button type="button" class="button button-alert button-large ">
    Button-large
</button>

<!-- Alert Icon Download -->
<button type="button" class="button button-alert icon-download ">
    Icon-download
</button>

<!-- Alert Disabled -->
<button type="button" class="button button-alert  " disabled>
    Disabled
</button>

<!-- Alert Button Block -->
<button type="button" class="button button-alert button-block ">
    Button-block
</button>

<!-- Alert Button Block Icon Download -->
<button type="button" class="button button-alert button-block icon-download ">
    Button-block icon-download
</button>

<!-- Success Button Small -->
<button type="button" class="button button-success button-small ">
    Button-small
</button>

<!-- Success Button Default -->
<button type="button" class="button button-success  ">
    Button-default
</button>

<!-- Success Button Large -->
<button type="button" class="button button-success button-large ">
    Button-large
</button>

<!-- Success Icon Download -->
<button type="button" class="button button-success icon-download ">
    Icon-download
</button>

<!-- Success Disabled -->
<button type="button" class="button button-success  " disabled>
    Disabled
</button>

<!-- Success Button Block -->
<button type="button" class="button button-success button-block ">
    Button-block
</button>

<!-- Success Button Block Icon Download -->
<button type="button" class="button button-success button-block icon-download ">
    Button-block icon-download
</button>

/* Primary Button Small */
{
  "text": "Button-small",
  "type": "primary",
  "modifier": "button-small",
  "disabled": null
}

/* Primary Button Default */
{
  "text": "Button-default",
  "type": "primary",
  "modifier": null,
  "disabled": null
}

/* Primary Button Large */
{
  "text": "Button-large",
  "type": "primary",
  "modifier": "button-large",
  "disabled": null
}

/* Primary Icon Download */
{
  "text": "Icon-download",
  "type": "primary",
  "modifier": "icon-download",
  "disabled": null
}

/* Primary Disabled */
{
  "text": "Disabled",
  "type": "primary",
  "modifier": null,
  "disabled": true
}

/* Primary Button Block */
{
  "text": "Button-block",
  "type": "primary",
  "modifier": "button-block",
  "disabled": null
}

/* Primary Button Block Icon Download */
{
  "text": "Button-block icon-download",
  "type": "primary",
  "modifier": "button-block icon-download",
  "disabled": null
}

/* Secondary Button Small */
{
  "text": "Button-small",
  "type": "secondary",
  "modifier": "button-small",
  "disabled": null
}

/* Secondary Button Default */
{
  "text": "Button-default",
  "type": "secondary",
  "modifier": null,
  "disabled": null
}

/* Secondary Button Large */
{
  "text": "Button-large",
  "type": "secondary",
  "modifier": "button-large",
  "disabled": null
}

/* Secondary Icon Download */
{
  "text": "Icon-download",
  "type": "secondary",
  "modifier": "icon-download",
  "disabled": null
}

/* Secondary Disabled */
{
  "text": "Disabled",
  "type": "secondary",
  "modifier": null,
  "disabled": true
}

/* Secondary Button Block */
{
  "text": "Button-block",
  "type": "secondary",
  "modifier": "button-block",
  "disabled": null
}

/* Secondary Button Block Icon Download */
{
  "text": "Button-block icon-download",
  "type": "secondary",
  "modifier": "button-block icon-download",
  "disabled": null
}

/* Alert Button Small */
{
  "text": "Button-small",
  "type": "alert",
  "modifier": "button-small",
  "disabled": null
}

/* Alert Button Default */
{
  "text": "Button-default",
  "type": "alert",
  "modifier": null,
  "disabled": null
}

/* Alert Button Large */
{
  "text": "Button-large",
  "type": "alert",
  "modifier": "button-large",
  "disabled": null
}

/* Alert Icon Download */
{
  "text": "Icon-download",
  "type": "alert",
  "modifier": "icon-download",
  "disabled": null
}

/* Alert Disabled */
{
  "text": "Disabled",
  "type": "alert",
  "modifier": null,
  "disabled": true
}

/* Alert Button Block */
{
  "text": "Button-block",
  "type": "alert",
  "modifier": "button-block",
  "disabled": null
}

/* Alert Button Block Icon Download */
{
  "text": "Button-block icon-download",
  "type": "alert",
  "modifier": "button-block icon-download",
  "disabled": null
}

/* Success Button Small */
{
  "text": "Button-small",
  "type": "success",
  "modifier": "button-small",
  "disabled": null
}

/* Success Button Default */
{
  "text": "Button-default",
  "type": "success",
  "modifier": null,
  "disabled": null
}

/* Success Button Large */
{
  "text": "Button-large",
  "type": "success",
  "modifier": "button-large",
  "disabled": null
}

/* Success Icon Download */
{
  "text": "Icon-download",
  "type": "success",
  "modifier": "icon-download",
  "disabled": null
}

/* Success Disabled */
{
  "text": "Disabled",
  "type": "success",
  "modifier": null,
  "disabled": true
}

/* Success Button Block */
{
  "text": "Button-block",
  "type": "success",
  "modifier": "button-block",
  "disabled": null
}

/* Success Button Block Icon Download */
{
  "text": "Button-block icon-download",
  "type": "success",
  "modifier": "button-block icon-download",
  "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.
    
      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;
      font-weight: 600;
      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.6;
      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;
      }
    
      &::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