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 

<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 Icon Download Icon Left -->
<button type="button" class="button button-primary icon-download icon-left ">
    Icon-download icon-left
</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 Icon Download Icon Left -->
<button type="button" class="button button-secondary icon-download icon-left ">
    Icon-download icon-left
</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 Icon Download Icon Left -->
<button type="button" class="button button-alert icon-download icon-left ">
    Icon-download icon-left
</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 Icon Download Icon Left -->
<button type="button" class="button button-success icon-download icon-left ">
    Icon-download icon-left
</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": false
}


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


/* Success Button Block Icon Download */
{
  "text": "Button-block icon-download",
  "type": "success",
  "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