City of Ghent Style Guide

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.

How it works

Styling

There are four types of styling for buttons:

  1. Primary button styling, for the primary and most common actions
  2. Secondary button styling, for less common actions
  3. Alert button styling, for actions that need attention and that might be destructive and result in loss of data
  4. Success button styling, for actions where you want to highlight success

Size

Buttons come in different sizes. A button can have the default size, there is also a large variant and a small variant. See the examples. Use the size of a button to indicate its importance relative to other user interface components.

By default, the width of a button is automatically resized depending on the length of the label. Buttons can also behave as a block. In this case they stretch to the available width in the surrounding element. See the exammples.

Icons

Buttons can have an icon, aligned at the right-hand side or at the left-hand side. The icon can help the user identify a certain action. However, the icon should not be needed to understand the action. In all cases, the label of the button itself should be clear by itself and should represent the corresponding action.

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>
  • Handle: @button--alert-button-block-icon-download
  • Preview:
  • Filesystem Path: components/21-atoms/button/button.twig
<button type="button" class="button button-alert button-block icon-download ">
    Button-block icon-download
</button>
{
  "text": "Button-block icon-download",
  "type": "alert",
  "modifier": "button-block icon-download",
  "disabled": false
}
  • 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');
      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;
    
        &.icon-left {
          @include button-icon-left;
        }
      }
    }
    
    ///
    /// 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: 1;
        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: '';
      }
    }
    
    ///
    /// Define a button with an icon on the left side.
    ///
    
    @mixin button-icon-left {
      &::before {
        order: unset;
        margin-right: .5rem;
        margin-left: 0;
        // Fix for IE11 flex order property.
        float: left;
      }
    }
    
    
    .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.6 KB