<div class="dso-example-wrapper">
<div class="dso-example-text">
<h2>Tertiaire button</h2>
</div>
<div class="dso-example">
<table class="table">
<caption>Verschijningsvormen van de tertiaire button (<code>.btn-link</code>).</caption>
<thead>
<tr>
<th scope="col">Beschrijving</th>
<th scope="col">Weergave</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normaal</td>
<td>
<p><button type="button" class="btn btn-link">
<svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg><span>Tertiaire button</span>
</button>
</p>
</td>
</tr>
<tr>
<td>Hover</td>
<td class="example-hover">
<p><button type="button" class="btn btn-link">
<svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg><span>Tertiaire button</span>
</button>
</p>
</td>
</tr>
<tr>
<td>Disabled</td>
<td>
<p><button type="button" class="btn btn-link" disabled>
<svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg><span>Tertiaire button</span>
</button>
</p>
</td>
</tr>
<tr>
<td>Alleen icoon</td>
<td>
<p><button type="button" title="Tertiaire button" class="btn btn-link">
<span class="sr-only">Tertiaire button</span><svg class="di di-info">
<use href="../../dso-icons.svg#info" />
</svg>
</button>
</p>
</td>
</tr>
<tr>
<td>Icoon links</td>
<td>
<p><button type="button" class="btn btn-link">
<svg class="di di-angle-left">
<use href="../../dso-icons.svg#angle-left" />
</svg><span>Tertiaire button</span>
</button>
</p>
</td>
</tr>
<tr>
<td>Icoon rechts</td>
<td>
<p><button type="button" class="btn btn-link">
<span>Tertiaire button</span><svg class="di di-angle-right">
<use href="../../dso-icons.svg#angle-right" />
</svg>
</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dso-example-wrapper">
<div class="dso-example-text">
<h2>Tertiaire button</h2>
</div>
<div class="dso-example">
<table class="table">
<caption>Verschijningsvormen van de tertiaire button (<code>.btn-link</code>).</caption>
<thead>
<tr>
<th scope="col">Beschrijving</th>
<th scope="col">Weergave</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normaal</td>
<td>
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' icon='angle-right' }}</p>
</td>
</tr>
<tr>
<td>Hover</td>
<td class="example-hover">
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' icon='angle-right' }}</p>
</td>
</tr>
<tr>
<td>Disabled</td>
<td>
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' disabled=true icon='angle-right' }}</p>
</td>
</tr>
<tr>
<td>Alleen icoon</td>
<td>
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' icon='info' iconOnly=true url='#' }}</p>
</td>
</tr>
<tr>
<td>Icoon links</td>
<td>
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' icon='angle-left' url='#' }}</p>
</td>
</tr>
<tr>
<td>Icoon rechts</td>
<td>
<p>{{> '@button' type='button' label='Tertiaire button' modifier='link' iconAfter='angle-right' url='#' }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
/* No context defined for this component. */
There are no notes for this item.