# SegmentedControl

A row of small pills with one selected: the list filter in the pane head and the account chips in the mobile masthead. Counts ride inside the label ("All · 6"), tabular.

```html
<div class="postie-seg" role="group" aria-label="Filter">
  <button class="postie-seg__item" aria-pressed="true">All</button>
  <button class="postie-seg__item" aria-pressed="false">Unread</button>
</div>
```

**When.** Two to five mutually exclusive views of the same list. On the chrome (mobile) it is the account switcher at `lg` and scrolls.

**The selected fill is a rule, not a prop.** On the dark working ground it is charcoal; on paper it is oxblood; on the chrome it is oxblood in both themes. Do not pass a colour.

**Never.**
- Never a sliding indicator or an animated thumb — the pill fill changes, nothing moves.
- Never an underline-tab style; Postie's tabs are pills.
- Never two selected, never none selected.
- Never icons instead of words in the segments.
- Never a bordered "outlined" group — separation is the fill step, not a border (tonal-step).