Filteren

Label

There are no notes for this item.

<!-- Default -->
<span class="dso-label">
    <span class="sr-only">Label: </span>Label tekst
</span>

<!-- Default Button -->
<span class="dso-label">
    <span class="sr-only">Label: </span>Label tekst
    <button type="button" title="Verwijder"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</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"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</span>

<!-- Primary -->
<span class="dso-label dso-label-primary">
    <span class="sr-only">Primair: </span>Label tekst
</span>

<!-- Primary Button -->
<span class="dso-label dso-label-primary">
    <span class="sr-only">Primair: </span>Label tekst
    <button type="button" title="Verwijder"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</span>

<!-- Success -->
<span class="dso-label dso-label-success">
    <span class="sr-only">Succes: </span>Label tekst
</span>

<!-- Success Button -->
<span class="dso-label dso-label-success">
    <span class="sr-only">Succes: </span>Label tekst
    <button type="button" title="Verwijder"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</span>

<!-- Warning -->
<span class="dso-label dso-label-warning">
    <span class="sr-only">Waarschuwing: </span>Label tekst
</span>

<!-- Warning Button -->
<span class="dso-label dso-label-warning">
    <span class="sr-only">Waarschuwing: </span>Label tekst
    <button type="button" title="Verwijder"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</span>

<!-- Danger -->
<span class="dso-label dso-label-danger">
    <span class="sr-only">Gevaar: </span>Label tekst
</span>

<!-- Danger Button -->
<span class="dso-label dso-label-danger">
    <span class="sr-only">Gevaar: </span>Label tekst
    <button type="button" title="Verwijder"><svg class="di di-times">
            <use href="../../dso-icons.svg#times" />
        </svg></button>
</span>

<span {{ className('dso-label', [modifier, 'dso-label-' + modifier]) }}>
  {% if status -%}<span class="sr-only">{{ status }}: </span>{% endif -%}{{ label }}
  {% if button -%}
    <button type="button" title="{{ buttonTitle }}">
      {%- render '@icon', {icon: button} -%}
    </button>
  {% endif -%}
</span>

/* Default */
status: Label
label: Label tekst

/* Default Button */
status: Label
label: Label tekst
button: times
buttonTitle: Verwijder

/* Info */
status: Info
modifier: info
label: Label tekst

/* Info Button */
status: Info
modifier: info
label: Label tekst
button: times
buttonTitle: Verwijder

/* Primary */
status: Primair
modifier: primary
label: Label tekst

/* Primary Button */
status: Primair
modifier: primary
label: Label tekst
button: times
buttonTitle: Verwijder

/* Success */
status: Succes
modifier: success
label: Label tekst

/* Success Button */
status: Succes
modifier: success
label: Label tekst
button: times
buttonTitle: Verwijder

/* Warning */
status: Waarschuwing
modifier: warning
label: Label tekst

/* Warning Button */
status: Waarschuwing
modifier: warning
label: Label tekst
button: times
buttonTitle: Verwijder

/* Danger */
status: Gevaar
modifier: danger
label: Label tekst

/* Danger Button */
status: Gevaar
modifier: danger
label: Label tekst
button: times
buttonTitle: Verwijder