Den Haag Design System

Button: Volgende 

<button type="button" class="button button--prevnext button--primary"><span>Volgende stap &#62;</span></button>
 
<button type="button" class="button{{#if modifier}} {{ modifier }}{{/if}}"{{{ attributes }}}>{{{ text }}}</button>
 
{
  "modifier": "button--prevnext button--primary",
  "text": "<span>Volgende stap &#62;</span>"
}
  • Content: 
    var upIcon = '' +
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">' +
  '<polygon fill="currentColor" points="1.1,12.6 8,5.7 14.9,12.6 16,11.4 9.1,4.6 8,3.4 6.9,4.6 0,11.4"/>' +
  '</svg>';

var downIcon = '' +
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="icon">' +
  '<polygon fill="currentColor" points="14.9,3.4 8,10.3 1.1,3.4 0,4.6 6.9,11.4 8,12.6 9.1,11.4 16,4.6"/>' +
  '</svg>';

export default function Button (element) {
  var buttonObject = {
    // Containers
    mainContainer: element,
    iconContainer: element.getElementsByClassName('icon-container')[0],
    screenReaderTextContainer: element.getElementsByClassName('sro-container')[0],
    targetContainer: null,

    // Texts
    screenReaderTexts: {
      collapsed: 'Toon details',
      expanded: 'Verberg details',
    },

    // State
    collapsed: true,

    /**
     * Set screen reader text.
     */
    setScreenReaderText: function () {
      if (this.collapsed) {
        this.screenReaderTextContainer.innerHTML = this.screenReaderTexts.collapsed;
      } else {
        this.screenReaderTextContainer.innerHTML = this.screenReaderTexts.expanded;
      }
    },

    setIcon: function () {
      if (this.collapsed) {
        this.iconContainer.innerHTML = downIcon;
      } else {
        this.iconContainer.innerHTML = upIcon;
      }
    },

    setTarget: function() {
      if (this.collapsed) {
        this.targetContainer.style.display = 'none';
      } else {
        this.targetContainer.style.display = 'table-row';
      }
    },

    toggle: function () {
      if (this.collapsed) {
        this.collapsed = false;
      } else {
        this.collapsed = true;
      }

      this.setScreenReaderText();
      this.setIcon();
      this.setTarget();
    }
  };

  // Make sure target is set.
  var target = document.getElementById(element.dataset.target);
  if (!target) {
    return;
  }
  buttonObject.targetContainer = target;

  // Make sure the button contains the right classes.
  if (!buttonObject.mainContainer.classList.contains('button')) {
    buttonObject.mainContainer.classList.add('button');
  }

  // Set variables
  if (buttonObject.mainContainer.dataset.collapsed == 'false') {
    buttonObject.collapsed = false;
  }

  // Overwrite default screen reader texts.
  if (buttonObject.mainContainer.dataset.sro != '') {
    var sroText = buttonObject.mainContainer.dataset.sro.split('|');
    buttonObject.screenReaderTexts.collapsed = sroText[0];
    buttonObject.screenReaderTexts.expanded = sroText[1];
  }

  // Set elements according to collapse state.
  buttonObject.setScreenReaderText();
  buttonObject.setIcon();
  buttonObject.setTarget();

  // Listen for click event.
  buttonObject.mainContainer.addEventListener('click', function (event) {
    event.preventDefault();
    buttonObject.toggle();
  });
}
  • URL: /components/raw/button/button.js
  • Filesystem Path: src/components/01-componenten/button/button.js
  • Size: 2.9 KB
  • Content: 
    .button,
a.button--link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: $font-serif;
  font-weight: 700;
  text-align: center;
  border: 2px solid transparent;
  padding: .3333333333rem $space-s;
  font-size: 1rem;
  color: $white;
  text-decoration: none;
  background-color: $green;
  -webkit-appearance: none; /* all browsers, incl Edge/Gecko support this with -webkit :'( */

  td & {
    padding: 0 ($space-xs + $space-xxs);
    font-size: $fs-down-1;
  }

  td &--icon,
  td &--toggle {
    padding: 0;
  }

  &[disabled],
  &[disabled]:hover {
    color: $grey-dark;
    background-color: $grey-light;
    cursor: not-allowed;
    border-color: transparent;
  }

  > svg {
    width: $space-s;
  }

  svg + span,
  span + svg,
  span + span {
    margin-left: $space-xs;
  }

  span {
    display: inline-flex;
  }

  /*
   * States
   */
  &:hover {
    border-color: $brown;
    background-color: $brown;
    color: $white;
  }

  &:focus {
    color: $black;
    background-color: $yellow;
    border-color: $black;
  }

  /**
   * Variants
   */
  &--primary {
    color: $white;
    background-color: $green;
  }

  &--secondary {
    color: $green;
    background-color: $white;
    border-color: $green;

    &[disabled],
    &[disabled]:hover {
      color: $grey-dark;
      background-color: $white;
      border-color: $grey-light;
    }
  }

  &--link {
    color: $green;
    font-family: $font-sans;
    text-decoration: none;

    &:hover {
      border-color: transparent;
      background: transparent;
      color: $brown;
    }
  }

  &--icon,
  &--toggle {
    padding: 0;
    border-radius: 50%;

    span {
      display: inherit;
      align-items: inherit;
      justify-content: inherit;
    }

    //These classes cant be used on input elements!
    &-arrow {
      &-right::after {
        content: "\00a0\003E";
      }

      &-left::after {
        content: "\00a0\003C";
      }
    }
  }

  &--toggle,
  &--close {
    background-color: transparent;
    font-size: 1.25rem;
  }

  &--toggle {
    color: $blue;
  }

  &--close {
    color: $grey;
  }

  &--right {
    float: right;
  }

  &--left {
    float: left;
  }

  /*
   * Sizes
   */
  &--sm {
    font-size: $fs-down-1;
    padding: $space-xxs $space-xs;
  }

  /**
   * Utils
   */
  &--full-width {
    width: 100%;
  }

  &__help-text {
    margin-top: $space-xxs;
    max-width: $space-xxxxl * 4;
    font-size: $fs-down-1;
  }
}

.button.medium {
  font-size: $fs-down-1;
  padding: $space-xs math.div($space-m, 2);
}

input.button--secondary,
input.left,
a.left {
  color: $green;
  background-color: $white;
  border-color: $green;

  &[disabled],
  &[disabled]:hover {
    color: $grey-dark;
    background-color: $white;
    border-color: $grey-light;
  }
}

input.fs__button--primary {
  &[disabled],
  &[disabled]:hover {
    color: $grey-dark;
    background-color: $grey-light;
    cursor: not-allowed;
    border-color: transparent;
  }
}

/**
 * align button to the right with flexbox
 */
.button-wrapper {
  display: flex;

  &--justify-right {
    justify-content: flex-end;
  }

  &--justify-outside {
    justify-content: space-between;
  }
}

a.button--link {
  margin: $space-m 0;

  &:hover {
    border: 2px solid $brown;
    background-color: $brown;
    color: $white;
  }

  &:focus {
    color: $black;
    background-color: $yellow;
    border-color: $black;
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/01-componenten/button/button.scss
  • Size: 3.5 KB

Omschrijving

Buttons geven aan welke actie zal plaatsvinden wanneer de gebruiker interactie ermee heeft. Knoppen worden gebruikt om een ​​actie te initialiseren. Dit gebeurt zowel op de voor- als op de achtergrond.

Requirements

  • Wanneer de gebruiker de knop ziet is deze $groen. (default)
  • Wanneer de gebruiker over de knop heen hovert is deze $brown. (hover)
  • Wanneer de gebruiker de knop ingedrukt heeft is deze $yellow. (active)
  • Wanneer de gebruiker de knop geselecteerd heeft is deze $yellow. (focus)
  • Wanneer de knop disabled is, is deze $grey-light. (disabled)

Button breedte

Buttons hebben twee breedte opties:

  1. Neemt de breedte van de tekst aan
  2. Neemt de breedte van bovenliggende element aan
  3. Fixed breedte (twee knoppen naast elkaar moeten dezelfde breedte hebben)

Button tekst

De regels van de tekst in buttons zijn als volgt:

  1. De eerste letter van de tekst begint altijd met een hoofdletter.
  2. Bij actiebuttons begint het eerste woord van de tekst met een werkwoord (behalve bij Terug).