<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.