<button type="button" class="button button--primary"><span>Toon minder</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 6">
        <polygon fill="currentColor" points="8,3.2 10.5,5.3 11.4,6 12.5,4.7 8.2,1.2 8,1 8,1 8,1 7.8,1.2 3.5,4.7 4.6,6 5.5,5.3 " /></svg></button>
<button type="button" class="button{{#if modifier}} {{ modifier }}{{/if}}"{{{ attributes }}}>{{{ text }}}</button>
{
  "modifier": "button--primary",
  "text": "<span>Toon minder</span><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 6\"><polygon fill=\"currentColor\" points=\"8,3.2 10.5,5.3 11.4,6 12.5,4.7 8.2,1.2 8,1 8,1 8,1 7.8,1.2 3.5,4.7 4.6,6 5.5,5.3 \"/></svg>"
}
  • 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).