DSO Component Library

Button 

<!-- Default button -->
<button type="button" class="btn btn-default">
    Versturen
</button>


<!-- Primary submit button -->
<button type="submit" class="btn btn-primary">
    Versturen
</button>


<!-- Disabled button -->
<button type="submit" class="btn btn-default" disabled>
    Versturen
</button>


<!-- Default button with icon -->
<button type="button" class="btn btn-default">
    <span class="fa fa-lock" aria-hidden="true"></span>
    <span class="sr-only">Vergrendelen</span>
</button>


<!-- Primary button with badge -->
<button type="button" class="btn btn-default">
    Versturen
    <span class="badge">3</span>
</button>


<!-- Button with icon and badge -->
<button type="button" class="btn btn-default">
    <span class="fa fa-envelope-o" aria-hidden="true"></span>
    Berichten
    <span class="badge">3</span>
</button>


<button type="{{ type }}" class="btn btn-{{ modifier }}" {{{ifattr 'disabled' disabled }}}>
  {{#if icon }}
    {{> '@icon' icon=icon }}
  {{/if}}
  {{#if iconOnly }}
    <span class="sr-only">{{ label }}</span>
  {{else}}
    {{ label }}
  {{/if}}
  {{#if count }}
    {{> '@badge' }}
  {{/if}}
</button>
 
/* Default button */
label: Versturen
type: button
modifier: default



/* Primary submit button */
label: Versturen
type: submit
modifier: primary



/* Disabled button */
label: Versturen
type: submit
modifier: default
disabled: true



/* Default button with icon */
label: Vergrendelen
type: button
modifier: default
icon: fa fa-lock
iconOnly: true



/* Primary button with badge */
label: Versturen
type: button
modifier: default
count: 3



/* Button with icon and badge */
label: Berichten
type: button
modifier: default
icon: fa fa-envelope-o
count: 3

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<button type="button" class="btn btn-default"> Versturen </button>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Button

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<button type="button" class="btn btn-default"> Versturen </button>