There are no notes for this item.
<!-- Default -->
<span class="dso-label">
Label tekst
</span>
<!-- Default Button -->
<span class="dso-label">
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Default Compact -->
<span class="dso-label dso-compact">
Label tekst
</span>
<!-- Info -->
<span class="dso-label dso-label-info">
<span class="sr-only">info: </span>
Label tekst
</span>
<!-- Info Button -->
<span class="dso-label dso-label-info">
<span class="sr-only">info: </span>
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Info Compact -->
<span class="dso-label dso-label-info dso-compact">
<span class="sr-only">info: </span>
Label tekst
</span>
<!-- Primary -->
<span class="dso-label dso-label-primary">
<span class="sr-only">primary: </span>
Label tekst
</span>
<!-- Primary Button -->
<span class="dso-label dso-label-primary">
<span class="sr-only">primary: </span>
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Primary Compact -->
<span class="dso-label dso-label-primary dso-compact">
<span class="sr-only">primary: </span>
Label tekst
</span>
<!-- Success -->
<span class="dso-label dso-label-success">
<span class="sr-only">success: </span>
Label tekst
</span>
<!-- Success Button -->
<span class="dso-label dso-label-success">
<span class="sr-only">success: </span>
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Success Compact -->
<span class="dso-label dso-label-success dso-compact">
<span class="sr-only">success: </span>
Label tekst
</span>
<!-- Warning -->
<span class="dso-label dso-label-warning">
<span class="sr-only">warning: </span>
Label tekst
</span>
<!-- Warning Button -->
<span class="dso-label dso-label-warning">
<span class="sr-only">warning: </span>
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Warning Compact -->
<span class="dso-label dso-label-warning dso-compact">
<span class="sr-only">warning: </span>
Label tekst
</span>
<!-- Danger -->
<span class="dso-label dso-label-danger">
<span class="sr-only">danger: </span>
Label tekst
</span>
<!-- Danger Button -->
<span class="dso-label dso-label-danger">
<span class="sr-only">danger: </span>
Label tekst
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<!-- Danger Compact -->
<span class="dso-label dso-label-danger dso-compact">
<span class="sr-only">danger: </span>
Label tekst
</span>
<!-- Default Hover -->
<span class="dso-label">
</span>
<!-- Default Button Hover -->
<span class="dso-label dso-label-default dso-hover">
<span class="sr-only">default: </span>
Hover
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span {{ className('dso-label', [status, 'dso-label-' + status], [compact, 'dso-compact'], [hover and removable, 'dso-hover']) }}>
{% if status %}
<span class="sr-only">{{ status }}: </span>
{% endif %}
{{ label }}
{% if removable %}
<button type="button" title="Verwijder">
{% render '@icon', {icon: 'times' }%}
</button>
{% endif %}
</span>
/* Default */
label: Label tekst
/* Default Button */
label: Label tekst
removable: true
/* Default Compact */
label: Label tekst
compact: true
/* Info */
status: info
label: Label tekst
/* Info Button */
status: info
label: Label tekst
removable: true
/* Info Compact */
status: info
label: Label tekst
compact: true
/* Primary */
status: primary
label: Label tekst
/* Primary Button */
status: primary
label: Label tekst
removable: true
/* Primary Compact */
status: primary
label: Label tekst
compact: true
/* Success */
status: success
label: Label tekst
/* Success Button */
status: success
label: Label tekst
removable: true
/* Success Compact */
status: success
label: Label tekst
compact: true
/* Warning */
status: warning
label: Label tekst
/* Warning Button */
status: warning
label: Label tekst
removable: true
/* Warning Compact */
status: warning
label: Label tekst
compact: true
/* Danger */
status: danger
label: Label tekst
/* Danger Button */
status: danger
label: Label tekst
removable: true
/* Danger Compact */
status: danger
label: Label tekst
compact: true
/* Default Hover */
_ignore: true
/* Default Button Hover */
status: default
label: Hover
removable: true
hover: true