Buttons

Component preview opent in nieuw tabblad

Buttons geven gebruikers de mogelijkheid om actie te nemen en keuzes te maken in een enkele klik. Buttons communiceren acties die gebruikers kunnen nemen. Ze moeten makkelijk te identificeren en makkelijk te vinden zijn. Tegelijkertijd moet een button duidelijk de actie aantonen die de gebruiker moet volbrengen. Gebruik vorm en kleur om een button visueel als button herkenbaar te maken voor de gebruiker.

  • Plaats buttons waar gebruikers ze verwachten en makkelijk vindbaar zijn
  • Van belang zijn: de grootte van een button, de ‘touch size’ en witruimte rondom
  • Verschillende platvormen gebruiken verschillende formaten buttons
  • Let op positie en volgorde met name als buttons in groepen staan (vorige/volgende) benadruk welke primair is of de belangrijkste actie aanduidt
  • Een actieknop moet opvallen: gebruik daarom een contrasterende kleur
  • Gebruik visuele hints om aandacht te vestigen op een actieknop

Hoe te gebruiken: Primaire buttons

De primaire actie is die button waarmee de gebruiker de taak volbrengt.

Als de gebruiker op het punt staat een onomkeerbare actie te ondernemen is de ‘Annuleer’ knop de primaire actie en krijgt deze visueel meer aandacht omdat de gebruiker goed na moet denken voordat hij/zij reageert.

In dit geval moet de veilige actie de aandacht krijgen en dus niet de onomkeerbare actie.

  • Tekst wit, Asap semibold 16
  • De rechthoekige grasgroene achtergrond (#39870c) heeft afgeronde hoeken van 4 pixels en een hoogte van 48 pixels
  • Wordt één keer per scherm gebruikt tenzij het dezelfde actie betreft
  • Uitzondering is gebruik in de header of in een modal
  • Niet elk scherm heeft een primaire knop nodig

Hoe te gebruiken: Secundaire buttons

  • Tekst grasgroen, Asap semibold 16
  • De rechthoekige witte achtergrond heeft een omlijning van 1 pixel in grasgroen (#39870c), afgeronde hoeken van 4 pixels en een hoogte van 48 pixels
  • Dit is de standaard button voor de meeste gebruikscasussen

Hoe te gebruiken: Tertiaire buttons

Tertiaire buttons worden gebruikt voor overige diverse acties: de actie is belangrijk maar hoeft niet datgene te zijn waarnaar de gebruiker op dat moment op zoek is.

Voorbeelden hiervan zijn ‘wijzigen’ of ‘toevoegen’ mits dit natuurlijk geen primaire acties zijn.

In het algemeen wordt hiervoor een minder prominente button stijl gebruikt.

  • Tekst grasgroen (#39870c), Asap semibold 16
  • En/of icoon in grasgroen (#39870c)

Hoe te gebruiken: Kleine buttons

Door de toevoeging van de class .btn-sm worden buttons kleiner getoond.

Standaard zijn primaire en secundaire buttons 48 pixels hoog en worden dan 30 pixels hoog.

Hoe te gebruiken: Buttons in sectieberichten

Gebruik buttons in een sectiebericht om een actie uit te voeren.

Gedrag en toegankelijkheid

  • Als zintuiglijke informatie wordt gebruikt (denk bijvoorbeeld aan knoppen met een chevron om naar de vorige of volgende pagina te gaan), voeg dan de tekst “volgende pagina” en “vorige pagina” toe;
  • Elementen zoals buttons die er hetzelfde uitzien, moeten ook overal hetzelfde ‘doen’;
  • Button tekst moet beschrijven wat het doet.

Bronvermelding

<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>

<div class="row">
    <div class="col-md-9">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Gebruik:</h3>
            <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Primaire button:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary"><span>Primaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-primary"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary"><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm"><span>Small</span></button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Primaire button met icon:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary">
            <dso-icon icon="chevron-left"></dso-icon><span>Primaire button</span>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-primary">
            <dso-icon icon="chevron-left"></dso-icon><span>Disabled</span>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary">
            <dso-icon icon="chevron-left"></dso-icon><span>Anchor</span>
        </a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm">
            <dso-icon icon="chevron-left"></dso-icon><span>Small</span>
        </button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-primary"><span>Primaire button</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-primary"><span>Disabled</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary"><span>Anchor</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm"><span>Small</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Primaire button met cms modifier:</h3>
            <code>.extern</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary extern"><span>Primaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-primary extern"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary extern" target="_blank" rel="noopener noreferrer"><span>Anchor</span><span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm extern"><span>Small</span></button>

    </div>
    <br>
    <div class="col-md-12">
        <div class="dso-rich-content">
            <code>.download</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary download"><span>Primaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-primary download"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary download"><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm download"><span>Small</span></button>

    </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
    <div class="col-md-9">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Gebruik:</h3>
            <p>o.a. secundaire acties in formulieren</p>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Secundaire button:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default"><span>Secundaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-default"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default"><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm"><span>Small</span></button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Secundaire button met icon:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default">
            <dso-icon icon="chevron-left"></dso-icon><span>Secundaire button</span>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-default">
            <dso-icon icon="chevron-left"></dso-icon><span>Disabled</span>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default">
            <dso-icon icon="chevron-left"></dso-icon><span>Anchor</span>
        </a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm">
            <dso-icon icon="chevron-left"></dso-icon><span>Small</span>
        </button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-default"><span>Secundaire button</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-default"><span>Disabled</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default"><span>Anchor</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm"><span>Small</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Secundaire button met cms modifier:</h3>
            <code>.extern</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default extern"><span>Secundaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-default extern"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default extern" target="_blank" rel="noopener noreferrer"><span>Anchor</span><span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm extern"><span>Small</span></button>

    </div>
    <br>
    <div class="col-md-12">
        <div class="dso-rich-content">
            <code>.download</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default download"><span>Secundaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-default download"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default download"><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm download"><span>Small</span></button>

    </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
    <div class="col-md-9">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Gebruik:</h3>
            <p>Lage prioriteit interacties</p>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Tertiaire button:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link"><span>Tertiaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-link"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link"><span>Anchor</span></a>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Tertiaire button met icon:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link">
            <dso-icon icon="chevron-left"></dso-icon><span>Tertiaire button</span>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-link">
            <dso-icon icon="chevron-left"></dso-icon><span>Disabled</span>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link">
            <dso-icon icon="chevron-left"></dso-icon><span>Anchor</span>
        </a>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-link"><span>Tertiaire button</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-link"><span>Disabled</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link"><span>Anchor</span>
            <dso-icon icon="chevron-right"></dso-icon>
        </a>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Tertiaire button - icon only:</h3>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link"><span class="sr-only">Link button</span>
            <dso-icon icon="info"></dso-icon>
        </button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Tertiaire button met cms modifier:</h3>
            <code>.extern</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link extern"><span>Tertiaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-link extern"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link extern" target="_blank" rel="noopener noreferrer"><span>Anchor</span><span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

    </div>
    <br>
    <div class="col-md-12">
        <div class="dso-rich-content">
            <code>.download</code>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link download"><span>Tertiaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" disabled class="btn btn-link download"><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link download"><span>Anchor</span></a>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <h3 class="toolkit-example-label">Tertiaire button met modifier om hem dezelfde hoogte te geven als belendende buttons:</h3>
            <code>.btn-align</code>
        </div>
    </div>
    <div class="col-md-12">
        <form class="dso-single-page">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-primary"><span>Primaire actie</span></button>

                <button type="button" class="btn btn-link btn-align"><span>Link button</span></button>

            </div>
        </form>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content" style="margin-bottom: 24px; margin-top: 40px;">
            <h2>Button combinaties</h2>
            <p>
                Wanneer buttons bij elkaar gegroepeerd moeten worden aangeboden, moet een <code>.dso-form-buttons</code> worden toegepast.
                Doorgaans zullen deze groeperingen in context van een formulier staan, maar dit is niet noodzakelijk.
            </p>
            <p>
                Als buttons links uitgelijnd moeten worden, worden deze gegroepeerd in een <code>div.dso-aside</code>.
                Uitzondering: dit is niet nodig in een <code>.dso-single-page</code>, daar worden de knoppen al links uitgelijnd.
            </p>
        </div>
    </div>
    <div class="col-md-12">
        <h3 class="toolkit-example-label">Paginering door stappen</h3>
        <form>
            <div class="dso-form-buttons">
                <div class="dso-aside">
                    <button type="button" class="btn btn-link">
                        <dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
                    </button>

                </div>
                <button type="button" class="btn btn-primary"><span>Volgende stap</span>
                    <dso-icon icon="chevron-right"></dso-icon>
                </button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Paginering door stappen met extra tertiaire button</h3>
        <form>
            <div class="dso-form-buttons">
                <div class="dso-aside">
                    <button type="button" class="btn btn-link">
                        <dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
                    </button>

                </div>
                <button type="button" class="btn btn-link btn-align"><span>Link button</span></button>

                <button type="button" class="btn btn-primary"><span>Volgende stap</span>
                    <dso-icon icon="chevron-right"></dso-icon>
                </button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Met extra tertiaire button</h3>
        <form>
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-link btn-align"><span>Link button</span></button>

                <button type="button" class="btn btn-primary"><span>Volgende stap</span>
                    <dso-icon icon="chevron-right"></dso-icon>
                </button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Met secundaire button</h3>
        <form>
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-default"><span>Standaard button</span></button>

                <button type="button" class="btn btn-primary"><span>Volgende stap</span>
                    <dso-icon icon="chevron-right"></dso-icon>
                </button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Uitzondering: single page (<code>.dso-single-page</code>)</h3>
        <form class="dso-single-page">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-primary"><span>Primaire actie</span></button>

                <button type="button" class="btn btn-link btn-align"><span>Link button</span></button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Uitzondering: single page (<code>.dso-single-page</code>), met secundaire button</h3>
        <form class="dso-single-page">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-primary"><span>Primaire actie</span></button>

                <button type="button" class="btn btn-default"><span>Standaard button</span></button>

            </div>
        </form>
        <br>
        <h3 class="toolkit-example-label">Buiten formulier context, met single page (<code>.dso-single-page</code>)</h3>
        <div class="dso-form-buttons dso-single-page">
            <button type="button" class="btn btn-primary"><span>Primaire actie</span></button>

            <button type="button" class="btn btn-link btn-align"><span>Link button</span></button>

        </div>
        <br>
        <h3 class="toolkit-example-label">Buiten formulier context, met single page (<code>.dso-single-page</code>), met secundaire button</h3>
        <div class="dso-form-buttons dso-single-page">
            <button type="button" class="btn btn-primary"><span>Primaire actie</span></button>

            <button type="button" class="btn btn-default"><span>Standaard button</span></button>

        </div>
    </div>
</div>
<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>

<div class="row">
  <div class="col-md-9">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Gebruik:</h3>
      <p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Primaire button:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Primaire button met icon:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button', icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small', icon: 'chevron-left'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button', iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small', iconAfter: 'chevron-right'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Primaire button met cms modifier:</h3>
      <code>.extern</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary extern', label: 'Primaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary extern', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-primary extern', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary btn-sm extern', label: 'Small'} %}
  </div>
  <br>
  <div class="col-md-12">
    <div class="dso-rich-content">
      <code>.download</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary download', label: 'Primaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary download', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-primary download', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'primary btn-sm download', label: 'Small'} %}
  </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
  <div class="col-md-9">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Gebruik:</h3>
      <p>o.a. secundaire acties in formulieren</p>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Secundaire button:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Secundaire button met icon:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button', icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small', icon: 'chevron-left'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button', iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small', iconAfter: 'chevron-right'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Secundaire button met cms modifier:</h3>
      <code>.extern</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default extern', label: 'Secundaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default extern', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-default extern', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default btn-sm extern', label: 'Small'} %}
  </div>
  <br>
  <div class="col-md-12">
    <div class="dso-rich-content">
      <code>.download</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default download', label: 'Secundaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default download', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-default download', label: 'Anchor', url: '#'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'default btn-sm download', label: 'Small'} %}
  </div>
</div>

<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
  <div class="col-md-9">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Gebruik:</h3>
      <p>Lage prioriteit interacties</p>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Tertiaire button:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Tertiaire button met icon:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button', icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button', iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Tertiaire button - icon only:</h3>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link', label: 'Link button', icon: 'info', iconOnly: 'true'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Tertiaire button met cms modifier:</h3>
      <code>.extern</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link extern', label: 'Tertiaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link extern', label: 'Disabled', disabled: 'true'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-link extern', label: 'Anchor', url: '#'} %}
  </div>
  <br>
  <div class="col-md-12">
    <div class="dso-rich-content">
      <code>.download</code>
    </div>
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link download', label: 'Tertiaire button'} %}
  </div>
  <div class="col-md-3">
    {% render '@button', {type: 'button', modifier: 'link download', label: 'Disabled', disabled: 'true'} %}
  </div>
  <div class="col-md-3">
    {% render '@anchor', {modifier: 'btn btn-link download', label: 'Anchor', url: '#'} %}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content">
      <h3 class="toolkit-example-label">Tertiaire button met modifier om hem dezelfde hoogte te geven als belendende buttons:</h3>
      <code>.btn-align</code>
    </div>
  </div>
  <div class="col-md-12">
    <form class="dso-single-page">
      <div class="dso-form-buttons">
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
        </div>
      </form>
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-12">
    <div class="dso-rich-content" style="margin-bottom: 24px; margin-top: 40px;">
      <h2>Button combinaties</h2>
      <p>
        Wanneer buttons bij elkaar gegroepeerd moeten worden aangeboden, moet een <code>.dso-form-buttons</code> worden toegepast.
        Doorgaans zullen deze groeperingen in context van een formulier staan, maar dit is niet noodzakelijk.
      </p>
      <p>
        Als buttons links uitgelijnd moeten worden, worden deze gegroepeerd in een <code>div.dso-aside</code>.
        Uitzondering: dit is niet nodig in een <code>.dso-single-page</code>, daar worden de knoppen al links uitgelijnd.
      </p>
    </div>
  </div>
  <div class="col-md-12">
    <h3 class="toolkit-example-label">Paginering door stappen</h3>
    <form>
      <div class="dso-form-buttons">
        <div class="dso-aside">
          {% render '@button', {type: 'button', modifier: 'link', label: 'Vorige stap', icon: 'chevron-left'} %}
        </div>
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Paginering door stappen met extra tertiaire button</h3>
    <form>
      <div class="dso-form-buttons">
        <div class="dso-aside">
          {% render '@button', {type: 'button', modifier: 'link', label: 'Vorige stap', icon: 'chevron-left'} %}
        </div>
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Met extra tertiaire button</h3>
    <form>
      <div class="dso-form-buttons">
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Met secundaire button</h3>
    <form>
      <div class="dso-form-buttons">
        {% render '@button', {type: 'button', modifier: 'default', label: 'Standaard button'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Uitzondering: single page (<code>.dso-single-page</code>)</h3>
    <form class="dso-single-page">
      <div class="dso-form-buttons">
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Uitzondering: single page (<code>.dso-single-page</code>), met secundaire button</h3>
    <form class="dso-single-page">
      <div class="dso-form-buttons">
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
        {% render '@button', {type: 'button', modifier: 'default', label: 'Standaard button'} %}
      </div>
    </form>
    <br>
    <h3 class="toolkit-example-label">Buiten formulier context, met single page (<code>.dso-single-page</code>)</h3>
    <div class="dso-form-buttons dso-single-page">
      {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
      {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
    </div>
    <br>
    <h3 class="toolkit-example-label">Buiten formulier context, met single page (<code>.dso-single-page</code>), met secundaire button</h3>
    <div class="dso-form-buttons dso-single-page">
      {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
      {% render '@button', {type: 'button', modifier: 'default', label: 'Standaard button'} %}
    </div>
  </div>
</div>
/* No context defined for this component. */