Skip to main content

Tag Interactive

Types

Default

Result
Loading...
Live Editor
<div class="fds-tag fds-tag--interactive">
  <span class="fds-tag__label">Interactive tag</span>
</div>

With action

Result
Loading...
Live Editor
<div class="fds-tag fds-tag--interactive">
  <span class="fds-tag__label">Interactive tag</span>
  <button class="fds-tag__btn-close">
    <span class="fds-icon fds-tag__icon">
      <i class="fa-light fa-xmark"></i>
    </span>
  </button>
</div>

State

Disabled

Result
Loading...
Live Editor
<div class="fds-tag fds-tag--interactive fds-tag--disabled">
  <span class="fds-tag__label">Disabled tag</span>
  <button class="fds-tag__btn-close">
    <span class="fds-icon fds-tag__icon">
      <i class="fa-light fa-xmark"></i>
    </span>
  </button>
</div>