Components

Segmented

A row of square filter pills for selecting between a small set of options. The active item fills with ink; an optional status dot prefixes each label.

With status dots

Mark the selected item with .is-active. A .ds-segmented__dot with --ok or --ko sits before the label.

Active · ok · ko

<div class="ds-segmented">
  <button class="ds-segmented__item is-active">LBC_FR</button>
  <button class="ds-segmented__item"><span class="ds-segmented__dot ds-segmented__dot--ok"></span>LBC_BE</button>
  <button class="ds-segmented__item"><span class="ds-segmented__dot ds-segmented__dot--ko"></span>LBC_US</button>
</div>

Web Component

The <ds-segmented> element wraps .ds-segmented__item buttons, toggles the active state, and emits change. Set mode="multi" for multi-select.

<ds-segmented>

<ds-segmented>
  <button class="ds-segmented__item is-active">LBC_FR</button>
  <button class="ds-segmented__item">LBC_BE</button>
  <button class="ds-segmented__item">LBC_US</button>
</ds-segmented>