Develop

Styles

<div class="tng-count-indicator">
  <span class="tng-count-indicator-label">1 of 6</span>
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

Default

1 of 6

Contrast

1 of 6

The wrapper holds a label pill (.tng-count-indicator-label) and any combination of .tng-icon-button siblings. The label may sit at the start, in the middle, or at the end of the run; the wrapper applies the right inter-element spacing based on position. The label height matches the icon-button size that’s beside it.

Variants

On Image

Add .on-image to the wrapper so the label picks up a backdrop and border. Pair with .is-contrast on dark imagery so the foreground (and icon buttons) flip to contrast tokens.

<div class="tng-count-indicator on-image on-contrast">
  <span class="tng-count-indicator-label">1 of 6</span>
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

1 of 6

Sizes

The label height tracks the sibling icon-button size — drop .is-md, .is-sm, or .is-xs on the buttons and the label follows. Default is .is-sm (32px) when the icon-button class carries no size modifier.

<div class="tng-count-indicator">
  <span class="tng-count-indicator-label">1 of 6</span>
  <button class="tng-icon-button is-sm" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-sm" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

1 of 6

Arrangements

The label is optional, and may sit at the start, in the middle, or at the end of the wrapper. Spacing adapts to the position automatically.

<div class="tng-count-indicator">
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

<div class="tng-count-indicator">
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <span class="tng-count-indicator-label">1 of 6</span>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
</div>

1 of 6

<div class="tng-count-indicator">
  <button class="tng-icon-button is-md" aria-label="Previous">
    <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="tng-icon-button is-md" aria-label="Next">
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
  <span class="tng-count-indicator-label">1 of 6</span>
</div>

1 of 6