Buttons

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">
            <label>Gebruik:</label>
            <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">
            <label>Primaire button:</label>
        </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" class="btn btn-primary" disabled><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">
            <label>Primaire button met icon:</label>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Primaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary" disabled><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><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><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary" disabled><span>Disabled</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary"><span>Anchor</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-sm"><span>Small</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Primaire button met cms modifier:</label><br>
            <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" class="btn btn-primary extern" disabled><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-primary extern"><span>Anchor</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" class="btn btn-primary download" disabled><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">
            <label>Gebruik:</label>
            <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">
            <label>Secundaire button:</label>
        </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" class="btn btn-default" disabled><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">
            <label>Secundaire button met icon:</label>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Secundaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default" disabled><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Anchor</span></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><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><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default" disabled><span>Disabled</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default"><span>Anchor</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></a>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-default btn-sm"><span>Small</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Secundaire button met cms modifier:</label><br>
            <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" class="btn btn-default extern" disabled><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-default extern"><span>Anchor</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" class="btn btn-default download" disabled><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">
            <label>Gebruik:</label>
            <p>Lage prioriteit interacties</p>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Tertiaire button:</label>
        </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" class="btn btn-link" disabled><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">
            <label>Tertiaire button met icon:</label>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Tertiaire button</span></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link" disabled><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><span>Disabled</span></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link"><svg class="di di-chevron-left">
                <use href="../../dso-icons.svg#chevron-left" />
            </svg><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><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link" disabled><span>Disabled</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></button>

    </div>
    <div class="col-md-3">
        <a href="#" class="btn btn-link"><span>Anchor</span><svg class="di di-chevron-right">
                <use href="../../dso-icons.svg#chevron-right" />
            </svg></a>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Tertiaire button - icon only:</label>
        </div>
    </div>
    <div class="col-md-3">
        <button type="button" title="Link button" class="btn btn-link"><span class="sr-only">Link button</span><svg class="di di-info">
                <use href="../../dso-icons.svg#info" />
            </svg></button>

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Tertiaire button met cms modifier:</label><br>
            <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" class="btn btn-link extern" disabled><span>Disabled</span></button>

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

    </div>
    <div class="col-md-3">
        <button type="button" class="btn btn-link 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-link download"><span>Tertiaire button</span></button>

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

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

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

    </div>
</div>
<br>
<div class="row">
    <div class="col-md-12">
        <div class="dso-rich-content">
            <label>Tertiaire button met modifier om hem dezelfde hoogte te geven als belendende buttons:</label><br>
            <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">
            <label>Margins tussen knoppen: 16px</label>
        </div>
    </div>
    <div class="col-md-12">
        <br>
        <form class="dso-sections">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-default"><svg class="di di-chevron-left">
                        <use href="../../dso-icons.svg#chevron-left" />
                    </svg><span>Vorige stap</span></button>

                <button type="button" class="btn btn-primary"><span>Volgende stap</span><svg class="di di-chevron-right">
                        <use href="../../dso-icons.svg#chevron-right" />
                    </svg></button>

            </div>
        </form>
        <br>
        <form class="dso-sections">
            <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><svg class="di di-chevron-right">
                        <use href="../../dso-icons.svg#chevron-right" />
                    </svg></button>

            </div>
        </form>
        <br>
        <form class="dso-sections">
            <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><svg class="di di-chevron-right">
                        <use href="../../dso-icons.svg#chevron-right" />
                    </svg></button>

            </div>
        </form>
        <br>
        <form class="dso-single-page">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-primary"><svg class="di di-chevron-left">
                        <use href="../../dso-icons.svg#chevron-left" />
                    </svg><span>Primaire actie</span></button>

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

            </div>
        </form>
        <br>
        <form class="dso-single-page">
            <div class="dso-form-buttons">
                <button type="button" class="btn btn-primary"><svg class="di di-chevron-left">
                        <use href="../../dso-icons.svg#chevron-left" />
                    </svg><span>Primaire actie</span></button>

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

            </div>
        </form>
    </div>
</div>
Primaire button / Call to action




  

    

      
      
De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.

    

  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small'} %}
  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button', icon: 'chevron-left'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small', icon: 'chevron-left'} %}
  







  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire button', iconAfter: 'chevron-right'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-primary', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary btn-sm', label: 'Small', iconAfter: 'chevron-right'} %}
  







  

    

      

      .extern
    

  

  

    {% render '@button', {type: 'button', modifier: 'primary extern', label: 'Primaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary extern', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-primary extern', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary btn-sm extern', label: 'Small'} %}
  

  

  

    

      .download
    

  

  

    {% render '@button', {type: 'button', modifier: 'primary download', label: 'Primaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary download', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-primary download', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'primary btn-sm download', label: 'Small'} %}
  





Secundaire button



  

    

      
      
o.a. secundaire acties in formulieren

    

  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small'} %}
  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button', icon: 'chevron-left'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small', icon: 'chevron-left'} %}
  







  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Secundaire button', iconAfter: 'chevron-right'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-default', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default btn-sm', label: 'Small', iconAfter: 'chevron-right'} %}
  







  

    

      

      .extern
    

  

  

    {% render '@button', {type: 'button', modifier: 'default extern', label: 'Secundaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default extern', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-default extern', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default btn-sm extern', label: 'Small'} %}
  

  

  

    

      .download
    

  

  

    {% render '@button', {type: 'button', modifier: 'default download', label: 'Secundaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default download', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-default download', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'default btn-sm download', label: 'Small'} %}
  





Tertiaire button



  

    

      
      
Lage prioriteit interacties

    

  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#'} %}
  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button', icon: 'chevron-left'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true, icon: 'chevron-left'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#', icon: 'chevron-left'} %}
  







  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Tertiaire button', iconAfter: 'chevron-right'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Disabled', disabled: true, iconAfter: 'chevron-right'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-link', label: 'Anchor', url: '#', iconAfter: 'chevron-right'} %}
  







  

    

      
    

  

  

    {% render '@button', {type: 'button', modifier: 'link', label: 'Link button', icon: 'info', iconOnly: 'true', urel: '#'} %}
  







  

    

      

      .extern
    

  

  

    {% render '@button', {type: 'button', modifier: 'link extern', label: 'Tertiaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link extern', label: 'Disabled', disabled: 'true'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-link extern', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link btn-sm extern', label: 'Small'} %}
  

  

  

    

      .download
    

  

  

    {% render '@button', {type: 'button', modifier: 'link download', label: 'Tertiaire button'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link download', label: 'Disabled', disabled: 'true'} %}
  

  

    {% render '@anchor', {modifier: 'btn btn-link download', label: 'Anchor', url: '#'} %}
  

  

    {% render '@button', {type: 'button', modifier: 'link btn-sm download', label: 'Small'} %}
  







  

    

      

      .btn-align
    

  

  

    

      

        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie'} %}
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
        

      

  







  

    

      
    

  

  

    

    

      

        {% render '@button', {type: 'button', modifier: 'default', label: 'Vorige stap', icon: 'chevron-left'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      

    

    

    

      

        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      

    

    

    

      

        {% render '@button', {type: 'button', modifier: 'default', label: 'Standaard button'} %}
        {% render '@button', {type: 'button', modifier: 'primary', label: 'Volgende stap', iconAfter: 'chevron-right'} %}
      

    

    

    

      

        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie', icon: 'chevron-left'} %}
        {% render '@button', {type: 'button', modifier: 'link btn-align', label: 'Link button'} %}
      

    

    

    

      

        {% render '@button', {type: 'button', modifier: 'primary', label: 'Primaire actie', icon: 'chevron-left'} %}
        {% render '@button', {type: 'button', modifier: 'default', label: 'Standaard button'} %}
      

    

  


/* No context defined for this component. */