Link copied!

Label Examples

e-label

<e-label content="Label Content" ></e-label>
<e-label content="Label Content" disabled ></e-label>
<e-label content="Label Close" close></e-label>
<e-label icon="arrow-up" content="Default Label"></e-label>
<e-label close content="Label Content" type="success-faint"></e-label>
<e-label close content="Label Content" type="success"></e-label>
<e-label close content="Label Content" type="highlight-faint"></e-label>
<e-label close content="Label Content" type="highlight"></e-label>
<e-label close content="Label Content" type="warning"></e-label>
<e-label close content="Label Content" type="warning-faint"></e-label>
<e-label close content="Label Content" type="error"></e-label>
<e-label close content="Label Content" type="error-faint"></e-label>
<e-label icon close content="Default Label" type="success-faint"></e-label>
<e-label icon close content="Default Label" type="success"></e-label>
<e-label icon close content="Default Label" type="highlight-faint"></e-label>
<e-label icon close content="Default Label" type="highlight"></e-label>
<e-label icon close content="Default Label" type="warning"></e-label>
<e-label icon close content="Default Label" type="warning-faint"></e-label>
<e-label icon close content="Default Label" type="error"></e-label>
<e-label icon close content="Default Label" type="error-faint"></e-label>
<div class="e-margin-s">
  <div class="e-label">
    Label Goes Here
  </div>
</div>
<div class="e-margin-s">
  <div class="e-label">
    Label Goes Here
    <button type="button" class="e-label__close"></button>
  </div>
</div>
<div class="e-margin-s">
  <div class="e-label">
    <e-icon class="e-label__icon" icon="e-arrow-up" color="inherit" type="small"></e-icon>
    <e-numeric value="451523"></e-numeric>
  </div>
</div>
<div class="e-margin-s">
  <div class="e-label e-label-default">
    Default Label
  </div>

  <div class="e-label e-label-highlight">
    Highlight Label
  </div>

  <div class="e-label e-label-highlight_faint">
    Faint Highlight Label
  </div>

  <div class="e-label e-label-success">
    Success Label
  </div>

  <div class="e-label e-label-success_faint">
    Faint Success Label
  </div>

  <div class="e-label e-label e-label-error">
    Error Label
  </div>

  <div class="e-label e-label e-label-error_faint">
    Faint Error Label
  </div>

  <div class="e-label e-label-warning">
    Warning Label
  </div>

  <div class="e-label e-label-warning_faint">
    Faint Warning Label
  </div>
</div>