DSO Toolkit | Component Library

Buttons 

<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>
 
<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' label='Primaire button' modifier='primary' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='primary' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='primary btn-sm' }}
  </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' label='Primaire button' modifier='primary' icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='primary' disabled=true icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='primary btn-sm' icon='chevron-left' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' type='button' label='Primaire button' modifier='primary' iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='primary' disabled=true iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='primary btn-sm' iconAfter='chevron-right' }}
  </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' label='Primaire button' modifier='primary extern' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='primary extern' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary extern' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='primary btn-sm extern' }}
  </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' label='Primaire button' modifier='primary download' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='primary download' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-primary download' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='primary btn-sm download' }}
  </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' label='Secundaire button' modifier='default' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='default' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='default btn-sm' }}
  </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' label='Secundaire button' modifier='default' icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='default' disabled=true icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='default btn-sm' icon='chevron-left' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' type='button' label='Secundaire button' modifier='default' iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='default' disabled=true iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='default btn-sm' iconAfter='chevron-right' }}
  </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' label='Secundaire button' modifier='default extern' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='default extern' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default extern' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='default btn-sm extern' }}
  </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' label='Secundaire button' modifier='default download' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='default download' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-default download' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='default btn-sm download' }}
  </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' label='Tertiaire button' modifier='link' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link' url='#' }}
  </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' label='Tertiaire button' modifier='link' icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link' disabled=true icon='chevron-left' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link' url='#' icon='chevron-left' }}
  </div>
</div>
<br>
<div class="row">
  <div class="col-md-3">
    {{> '@button' type='button' label='Tertiaire button' modifier='link' iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link' disabled=true iconAfter='chevron-right' }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link' url='#' iconAfter='chevron-right' }}
  </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' label='Link button' modifier='link' icon='info' iconOnly=true url='#' }}
  </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' label='Tertiaire button' modifier='link extern' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link extern' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link extern' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='link btn-sm extern' }}
  </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' label='Tertiaire button' modifier='link download' }}
  </div>
  <div class="col-md-3">
    {{> '@button' type='button' label='Disabled' modifier='link download' disabled=true }}
  </div>
  <div class="col-md-3">
    {{> '@anchor' label='Anchor' modifier='btn btn-link download' url='#' }}
  </div>
  <div class="col-md-3">
    {{> '@button' label='Small' type='button' modifier='link btn-sm download' }}
  </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' label='Primaire actie' modifier='primary' }}
        {{> '@button' type='button' label='Link button' modifier='link btn-align' url='#' }}
        </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' label='Vorige stap' modifier='default' icon='chevron-left' }}
        {{> '@button' type='button' label='Volgende stap' modifier='primary' iconAfter='chevron-right' }}
      </div>
    </form>
    <br>
    <form class="dso-sections">
      <div class="dso-form-buttons">
        {{> '@button' type='button' label='Link button' modifier='link btn-align' }}
        {{> '@button' type='button' label='Volgende stap' modifier='primary' iconAfter='chevron-right' }}
      </div>
    </form>
    <br>
    <form class="dso-sections">
      <div class="dso-form-buttons">
        {{> '@button' type='button' label='Standaard button' modifier='default' }}
        {{> '@button' type='button' label='Volgende stap' modifier='primary' iconAfter='chevron-right' }}
      </div>
    </form>
    <br>
    <form class="dso-single-page">
      <div class="dso-form-buttons">
        {{> '@button' type='button' label='Primaire actie' modifier='primary' icon='chevron-left' }}
        {{> '@button' type='button' label='Link button' modifier='link btn-align' }}
      </div>
    </form>
    <br>
    <form class="dso-single-page">
      <div class="dso-form-buttons">
        {{> '@button' type='button' label='Primaire actie' modifier='primary' icon='chevron-left' }}
        {{> '@button' type='button' label='Standaard button' modifier='default' }}
      </div>
    </form>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .example {
  border-bottom: 2px solid $grijs-10;
  border-top: 2px solid $grijs-10;
  margin-bottom: $u3;
  margin-top: $u3;
  padding-bottom: $u3;
  padding-top: $u2;

  .btn {
    &.btn-primary {
      &:hover {
        background-color: $dso-button-primary-hover-color;
        border-color: $dso-button-primary-hover-color;
      }

      &[disabled] {
        &,
        &:hover {
          background-color: $dso-button-primary-disabled-color;
          border-color: $dso-button-primary-disabled-color;
          color: $wit;
          opacity: 1;
        }
      }
    }

    &.btn-default {
      &:hover {
        background-color: $dso-button-default-color;
        border-color: $dso-button-default-hover-color;
        color: $dso-button-default-hover-color;
      }

      &[disabled] {
        &,
        &:hover {
          background-color: $wit;
          border-color: $grasgroen-40;
          color: $grasgroen-40;
          opacity: 1;
        }
      }
    }

    &.btn-link {
      &:hover {
        color: $grasgroen;

        > svg.di {
          background-color: $wit;
          border-color: $grasgroen;
          color: $grasgroen;
        }
      }

      &[disabled] {
        &,
        &:hover {
          color: $grasgroen-40;
          opacity: 1;

          > svg.di {
            background-color: $wit;
            border-color: $grasgroen-40;
            color: $grasgroen-40;
          }
        }
      }
    }
  }
}

.example-hover .btn.btn-primary {
  background-color: $dso-button-primary-hover-color;
  border-color: $dso-button-primary-hover-color;
  color: $wit;
}

.example-active .btn.btn-primary {
  background-color: $dso-button-primary-active-color;
  border-color: $dso-button-primary-active-color;
  color: $wit;
}

.example-hover .btn.btn-default {
  background-color: $grasgroen;
  border-color: $grasgroen;
  color: $wit;
}

.example-active .btn.btn-default {
  background-color: $dso-button-default-active-color;
  border-color: $dso-button-default-active-color;
  color: $wit;
}

.example-hover .btn.btn-link {
  > svg.di {
    background-color: $grasgroen;
    border-color: $grasgroen;
    color: $wit;
  }
}

.example-active .btn.btn-link {
  color: $bosgroen;

  > svg.di {
    background-color: $bosgroen;
    border-color: $bosgroen;
    color: $wit;
  }
}
  • URL: /components/raw/buttons/_buttons.scss
  • Filesystem Path: components/03-forms/10-misc/01-buttons/_buttons.scss
  • Size: 2.3 KB

There are no notes for this item.