Label (Web Component)

Component preview opent in nieuw tabblad

There are no notes for this item.

Labels

Label default

Label met button

Label compact

Label (standaard)

Label (standaard)

Label (standaard)

Label (info)

Label (info)

Label (info)

Label (primair)

Label (primair)

Label (primair)

Label (succes)

Label (succes)

Label (succes)

Label (waarschuwing)

Label (waarschuwing)

Label (waarschuwing)

Label (fout)

Label (fout)

Label (fout)

Label (helder)

Label (helder)

Label (helder)

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