DSO Component Library

Label 

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


<!-- Default Button -->
<span class="dso-label">
    Default
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


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


<!-- Info Button -->
<span class="dso-label dso-label-info">
    Info
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


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


<!-- Primary Button -->
<span class="dso-label dso-label-primary">
    Primary
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


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


<!-- Success Button -->
<span class="dso-label dso-label-success">
    Success
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


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


<!-- Warning Button -->
<span class="dso-label dso-label-warning">
    Warning
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


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


<!-- Danger Button -->
<span class="dso-label dso-label-danger">
    Danger
    <button type="button" title="Verwijder">
        <span class="fas fa-times"></span>
    </button>
</span>


<span class="dso-label{{#if modifier}} dso-label-{{ modifier }}{{/if}}">
  {{ label }}
  {{#if button}}
    <button type="button" title="{{ buttonTitle }}">
      <span class="{{ button }}"></span>
    </button>
  {{/if}}
</span>
 
/* Default */
label: Default



/* Default Button */
label: Default
button: fas fa-times
buttonTitle: Verwijder



/* Info */
label: Info
modifier: info



/* Info Button */
label: Info
modifier: info
button: fas fa-times
buttonTitle: Verwijder



/* Primary */
label: Primary
modifier: primary



/* Primary Button */
label: Primary
modifier: primary
button: fas fa-times
buttonTitle: Verwijder



/* Success */
label: Success
modifier: success



/* Success Button */
label: Success
modifier: success
button: fas fa-times
buttonTitle: Verwijder



/* Warning */
label: Warning
modifier: warning



/* Warning Button */
label: Warning
modifier: warning
button: fas fa-times
buttonTitle: Verwijder



/* Danger */
label: Danger
modifier: danger



/* Danger Button */
label: Danger
modifier: danger
button: fas fa-times
buttonTitle: Verwijder

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

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

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Label

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<button type="button" title="Verwijder"> <span class="fas fa-times"></span> </button>