There are no notes for this item.
<!-- Default -->
<dso-label id="label-default">
Label (standaard)
</dso-label>
<script>
document.getElementById('label-default').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Default Button -->
<dso-label id="label-default-button" removable>
Label (standaard)
</dso-label>
<script>
document.getElementById('label-default-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Default Compact -->
<dso-label id="label-default-compact" compact>
Label (standaard)
</dso-label>
<script>
document.getElementById('label-default-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Info -->
<dso-label id="label-info" status="info">
Label (info)
</dso-label>
<script>
document.getElementById('label-info').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Info Button -->
<dso-label id="label-info-button" status="info" removable>
Label (info)
</dso-label>
<script>
document.getElementById('label-info-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Info Compact -->
<dso-label id="label-info-compact" status="info" compact>
Label (info)
</dso-label>
<script>
document.getElementById('label-info-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Primary -->
<dso-label id="label-primary" status="primary">
Label (primair)
</dso-label>
<script>
document.getElementById('label-primary').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Primary Button -->
<dso-label id="label-primary-button" status="primary" removable>
Label (primair)
</dso-label>
<script>
document.getElementById('label-primary-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Primary Compact -->
<dso-label id="label-primary-compact" status="primary" compact>
Label (primair)
</dso-label>
<script>
document.getElementById('label-primary-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Success -->
<dso-label id="label-success" status="success">
Label (succes)
</dso-label>
<script>
document.getElementById('label-success').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Success Button -->
<dso-label id="label-success-button" status="success" removable>
Label (succes)
</dso-label>
<script>
document.getElementById('label-success-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Success Compact -->
<dso-label id="label-success-compact" status="success" compact>
Label (succes)
</dso-label>
<script>
document.getElementById('label-success-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Warning -->
<dso-label id="label-warning" status="warning">
Label (waarschuwing)
</dso-label>
<script>
document.getElementById('label-warning').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Warning Button -->
<dso-label id="label-warning-button" status="warning" removable>
Label (waarschuwing)
</dso-label>
<script>
document.getElementById('label-warning-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Warning Compact -->
<dso-label id="label-warning-compact" status="warning" compact>
Label (waarschuwing)
</dso-label>
<script>
document.getElementById('label-warning-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Danger -->
<dso-label id="label-danger" status="danger">
Label (fout)
</dso-label>
<script>
document.getElementById('label-danger').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Danger Button -->
<dso-label id="label-danger-button" status="danger" removable>
Label (fout)
</dso-label>
<script>
document.getElementById('label-danger-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Danger Compact -->
<dso-label id="label-danger-compact" status="danger" compact>
Label (fout)
</dso-label>
<script>
document.getElementById('label-danger-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Bright -->
<dso-label id="label-bright" status="bright">
Label (helder)
</dso-label>
<script>
document.getElementById('label-bright').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Bright Button -->
<dso-label id="label-bright-button" status="bright" removable>
Label (helder)
</dso-label>
<script>
document.getElementById('label-bright-button').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Bright Compact -->
<dso-label id="label-bright-compact" status="bright" compact>
Label (helder)
</dso-label>
<script>
document.getElementById('label-bright-compact').addEventListener('actionClick', e => console.log(e));
</script>
<dso-label id="label-{{ _self.name }}" {{ attributes([status, 'status', status], [compact, 'compact'], [removable, 'removable']) }}>
{{ label }}
</dso-label>
<script>
document.getElementById('label-{{ _self.name }}').addEventListener('actionClick', e => console.log(e));
</script>
/* 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