Skip to main content

Tag Semantic

Status

Result
Loading...
Live Editor
<div class="demo">
  <div class="fds-tag fds-tag--semantic fds-tag--success">
    <span class="fds-tag__label">Success tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--pending">
    <span class="fds-tag__label">Pending tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--error">
    <span class="fds-tag__label">Error tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--purple">
    <span class="fds-tag__label">Purple tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--information">
    <span class="fds-tag__label">Information tag</span>
  </div>
</div>

With icon

Result
Loading...
Live Editor
<div class="demo">
  <div class="fds-tag fds-tag--semantic fds-tag--success">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-check"></i>
    </span>
    <span class="fds-tag__label">Success tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--pending">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-exclamation"></i>
    </span>
    <span class="fds-tag__label">Pending tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--error">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-minus"></i>
    </span>
    <span class="fds-tag__label">Error tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--purple">
    <span class="fds-icon">
      <i class="fa-solid fa-circle"></i>
    </span>
    <span class="fds-tag__label">Purple tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--information">
    <span class="fds-icon">
      <i class="fa-solid fa-circle"></i>
    </span>
    <span class="fds-tag__label">Information tag</span>
  </div>
</div>

Transparent

Result
Loading...
Live Editor
<div class="demo">
  <div class="fds-tag fds-tag--semantic fds-tag--success fds-tag--transparent">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-check"></i>
    </span>
    <span class="fds-tag__label">Success tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--pending fds-tag--transparent">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-exclamation"></i>
    </span>
    <span class="fds-tag__label">Pending tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--error fds-tag--transparent">
    <span class="fds-icon">
      <i class="fa-solid fa-circle-minus"></i>
    </span>
    <span class="fds-tag__label">Error tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--purple fds-tag--transparent">
    <span class="fds-icon">
      <i class="fa-solid fa-circle"></i>
    </span>
    <span class="fds-tag__label">Purple tag</span>
  </div>

  <div class="fds-tag fds-tag--semantic fds-tag--information fds-tag--transparent">
    <span class="fds-icon">
      <i class="fa-solid fa-circle"></i>
    </span>
    <span class="fds-tag__label">Information tag</span>
  </div>
</div>