Label (CSS)

Component preview opent in nieuw tabblad

There are no notes for this item.

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

    Label tekst

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

    Label tekst

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

    </button>

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

    Label tekst

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

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

    Label tekst

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

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

    Label tekst

    <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">info: </span>

    Label tekst

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

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

    Label tekst

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

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

    Label tekst

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

    </button>

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

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

    Label tekst

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

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

    Label tekst

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

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

    Label tekst

    <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">success: </span>

    Label tekst

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

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

    Label tekst

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

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

    Label tekst

    <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">warning: </span>

    Label tekst

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

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

    Label tekst

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

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

    Label tekst

    <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">danger: </span>

    Label tekst

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

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

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

    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 status %}
    <span class="sr-only">{{ status }}: </span>
  {% endif %}
  {{ label }}
  {% if removable %}
    <button type="button" title="Verwijder">
      {% render '@icon', {icon: 'times' }%}
    </button>
  {% endif %}
</span>
/* 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
/* Default Hover */
_ignore: true
/* Default Button Hover */
status: default
label: Hover
removable: true
hover: true