There are no notes for this item.
<!-- Default -->
<dso-label id="label-default">Label (standaard)
</dso-label>
<!-- Default Button -->
<dso-label id="label-default-button" removable>Label (standaard)
</dso-label>
<script>
document.getElementById('label-default-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Default Compact -->
<dso-label id="label-default-compact" compact>Label (standaard)
</dso-label>
<!-- Info -->
<dso-label id="label-info" status="info">Label (info)
</dso-label>
<!-- Info Button -->
<dso-label id="label-info-button" status="info" removable>Label (info)
</dso-label>
<script>
document.getElementById('label-info-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Info Compact -->
<dso-label id="label-info-compact" status="info" compact>Label (info)
</dso-label>
<!-- Primary -->
<dso-label id="label-primary" status="primary">Label (primair)
</dso-label>
<!-- Primary Button -->
<dso-label id="label-primary-button" status="primary" removable>Label (primair)
</dso-label>
<script>
document.getElementById('label-primary-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Primary Compact -->
<dso-label id="label-primary-compact" status="primary" compact>Label (primair)
</dso-label>
<!-- Success -->
<dso-label id="label-success" status="success">Label (succes)
</dso-label>
<!-- Success Button -->
<dso-label id="label-success-button" status="success" removable>Label (succes)
</dso-label>
<script>
document.getElementById('label-success-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Success Compact -->
<dso-label id="label-success-compact" status="success" compact>Label (succes)
</dso-label>
<!-- Warning -->
<dso-label id="label-warning" status="warning">Label (waarschuwing)
</dso-label>
<!-- Warning Button -->
<dso-label id="label-warning-button" status="warning" removable>Label (waarschuwing)
</dso-label>
<script>
document.getElementById('label-warning-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Warning Compact -->
<dso-label id="label-warning-compact" status="warning" compact>Label (waarschuwing)
</dso-label>
<!-- Danger -->
<dso-label id="label-danger" status="danger">Label (fout)
</dso-label>
<!-- Danger Button -->
<dso-label id="label-danger-button" status="danger" removable>Label (fout)
</dso-label>
<script>
document.getElementById('label-danger-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Danger Compact -->
<dso-label id="label-danger-compact" status="danger" compact>Label (fout)
</dso-label>
<!-- Bright -->
<dso-label id="label-bright" status="bright">Label (helder)
</dso-label>
<!-- Bright Button -->
<dso-label id="label-bright-button" status="bright" removable>Label (helder)
</dso-label>
<script>
document.getElementById('label-bright-button').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Bright Compact -->
<dso-label id="label-bright-compact" status="bright" compact>Label (helder)
</dso-label>
<!-- Bright Symbol Image -->
<dso-label id="label-bright-symbol-image" status="bright">
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vag000"></span>
</span>
Met symbool (image)
</dso-label>
<!-- Bright Button Symbol Image -->
<dso-label id="label-bright-button-symbol-image" status="bright" removable>
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vag000"></span>
</span>
Met symbool (image)
</dso-label>
<script>
document.getElementById('label-bright-button-symbol-image').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Bright Compact Symbol Image -->
<dso-label id="label-bright-compact-symbol-image" status="bright" compact>
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vag000"></span>
</span>
Met symbool (image)
</dso-label>
<!-- Bright Symbol Color -->
<dso-label id="label-bright-symbol-color" status="bright">
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vszt030"></span>
</span>
Met symbool (color)
</dso-label>
<!-- Bright Button Symbol Color -->
<dso-label id="label-bright-button-symbol-color" status="bright" removable>
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vszt030"></span>
</span>
Met symbool (color)
</dso-label>
<script>
document.getElementById('label-bright-button-symbol-color').addEventListener('removeClick', e => console.log(e));
</script>
<!-- Bright Compact Symbol Color -->
<dso-label id="label-bright-compact-symbol-color" status="bright" compact>
<span slot="symbol">
<span class="symboolcode" data-symboolcode="vszt030"></span>
</span>
Met symbool (color)
</dso-label>
<dso-label id="label-{{ _self.name }}" {{ attributes([status, 'status', status], [compact, 'compact'], [removable, 'removable']) }}>
{%- if symbol %}
<span slot="symbol">
{{ symbol | safe }}
</span>
{% endif -%}
{{ label }}
</dso-label>
{% if removable %}
<script>
document.getElementById('label-{{ _self.name }}').addEventListener('removeClick', e => console.log(e));
</script>
{% endif %}
/* Default */
label: Label (standaard)
/* Default Button */
label: Label (standaard)
removable: true
/* Default Compact */
label: Label (standaard)
compact: true
/* Info */
status: info
label: Label (info)
/* Info Button */
status: info
label: Label (info)
removable: true
/* Info Compact */
status: info
label: Label (info)
compact: true
/* Primary */
status: primary
label: Label (primair)
/* Primary Button */
status: primary
label: Label (primair)
removable: true
/* Primary Compact */
status: primary
label: Label (primair)
compact: true
/* Success */
status: success
label: Label (succes)
/* Success Button */
status: success
label: Label (succes)
removable: true
/* Success Compact */
status: success
label: Label (succes)
compact: true
/* Warning */
status: warning
label: Label (waarschuwing)
/* Warning Button */
status: warning
label: Label (waarschuwing)
removable: true
/* Warning Compact */
status: warning
label: Label (waarschuwing)
compact: true
/* Danger */
status: danger
label: Label (fout)
/* Danger Button */
status: danger
label: Label (fout)
removable: true
/* Danger Compact */
status: danger
label: Label (fout)
compact: true
/* Bright */
status: bright
label: Label (helder)
/* Bright Button */
status: bright
label: Label (helder)
removable: true
/* Bright Compact */
status: bright
label: Label (helder)
compact: true
/* Bright Symbol Image */
status: bright
label: Met symbool (image)
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>
/* Bright Button Symbol Image */
status: bright
label: Met symbool (image)
removable: true
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>
/* Bright Compact Symbol Image */
status: bright
label: Met symbool (image)
compact: true
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>
/* Bright Symbol Color */
status: bright
label: Met symbool (color)
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>
/* Bright Button Symbol Color */
status: bright
label: Met symbool (color)
removable: true
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>
/* Bright Compact Symbol Color */
status: bright
label: Met symbool (color)
compact: true
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>