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 tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

Label tekst

<!-- Default -->
<dso-label id="label-default">
    Label tekst
</dso-label>

<script>
    document.getElementById('label-default').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Default Button -->
<dso-label id="label-default-button" removable>
    Label tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-default-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Info -->
<dso-label id="label-info" status="info">
    Label tekst
</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 tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-info-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Primary -->
<dso-label id="label-primary" status="primary">
    Label tekst
</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 tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-primary-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Success -->
<dso-label id="label-success" status="success">
    Label tekst
</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 tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-success-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Warning -->
<dso-label id="label-warning" status="warning">
    Label tekst
</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 tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-warning-compact').addEventListener('actionClick', e => console.log(e));
</script>
<!-- Danger -->
<dso-label id="label-danger" status="danger">
    Label tekst
</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 tekst
</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 tekst
</dso-label>

<script>
    document.getElementById('label-danger-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 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