Label (Web Component)

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