Label (CSS)

Component preview

<!-- Default -->
<span class="dso-label">

    Label (standaard)

</span>

<!-- Default Button -->
<span class="dso-label">

    Label (standaard)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Default Compact -->
<span class="dso-label dso-compact">

    Label (standaard)

</span>

<!-- Info -->
<span class="dso-label dso-label-info">

    <span class="sr-only">Opmerking: </span>

    Label (info)

</span>

<!-- Info Button -->
<span class="dso-label dso-label-info">

    <span class="sr-only">Opmerking: </span>

    Label (info)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Info Compact -->
<span class="dso-label dso-label-info dso-compact">

    <span class="sr-only">Opmerking: </span>

    Label (info)

</span>

<!-- Primary -->
<span class="dso-label dso-label-primary">

    Label (primair)

</span>

<!-- Primary Button -->
<span class="dso-label dso-label-primary">

    Label (primair)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Primary Compact -->
<span class="dso-label dso-label-primary dso-compact">

    Label (primair)

</span>

<!-- Success -->
<span class="dso-label dso-label-success">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

</span>

<!-- Success Button -->
<span class="dso-label dso-label-success">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Success Compact -->
<span class="dso-label dso-label-success dso-compact">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

</span>

<!-- Warning -->
<span class="dso-label dso-label-warning">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

</span>

<!-- Warning Button -->
<span class="dso-label dso-label-warning">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Warning Compact -->
<span class="dso-label dso-label-warning dso-compact">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

</span>

<!-- Danger -->
<span class="dso-label dso-label-danger">

    <span class="sr-only">Fout: </span>

    Label (fout)

</span>

<!-- Danger Button -->
<span class="dso-label dso-label-danger">

    <span class="sr-only">Fout: </span>

    Label (fout)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Danger Compact -->
<span class="dso-label dso-label-danger dso-compact">

    <span class="sr-only">Fout: </span>

    Label (fout)

</span>

<!-- Bright -->
<span class="dso-label dso-label-bright">

    Label (helder)

</span>

<!-- Bright Button -->
<span class="dso-label dso-label-bright">

    Label (helder)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact -->
<span class="dso-label dso-label-bright dso-compact">

    Label (helder)

</span>

<!-- Bright Symbol Image -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

</span>

<!-- Bright Button Symbol Image -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact Symbol Image -->
<span class="dso-label dso-label-bright dso-compact">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

</span>

<!-- Bright Symbol Color -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

</span>

<!-- Bright Button Symbol Color -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact Symbol Color -->
<span class="dso-label dso-label-bright dso-compact">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

</span>

<!-- Default Hover -->
<span class="dso-label">

</span>

<!-- Default Button Hover -->
<span class="dso-label dso-label-default dso-hover">

    Hover

    <button type="button" title="Verwijder">
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<span {{ className('dso-label', [status, 'dso-label-' + status], [compact, 'dso-compact'], [hover and removable, 'dso-hover']) }}>
  {% if symbol %}
    <span class="dso-label-symbol">
      {{ symbol | safe }}
    </span>
  {% endif %}
  {% if status | labelStatusMap %}
    <span class="sr-only">{{ status | labelStatusMap }}: </span>
  {% endif %}
  {{ label }}
  {% if removable %}
    <button type="button" title="Verwijder">
      {% render '@icon', {icon: 'times' }%}
    </button>
  {% endif %}
</span>

/* 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>

/* Default Hover */
_ignore: true

/* Default Button Hover */
status: default
label: Hover
removable: true
hover: true