Components / Navigation / Pill tabs
N4 · Navigation
Pill tabs
A single-select tab row. The hash records the open tab.
<div class="c-tabs" role="tablist">
<button type="button" class="c-tab" role="tab" data-hash="queue" aria-selected="true">Queue<span class="c-count">2</span></button>
<button type="button" class="c-tab" role="tab" data-hash="review" aria-selected="false">In review<span class="c-count">4</span></button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- One list has a few named slices.
- The open slice should survive a refresh.
When not to use
- The slices are a form with several answers at once.
- There are only two choices and no list under them. Use a segmented control.
Usage
<div class="c-tabs" role="tablist">
<button type="button" class="c-tab" role="tab" data-hash="queue" aria-selected="true">Queue<span class="c-count">2</span></button>
<button type="button" class="c-tab" role="tab" data-hash="review" aria-selected="false">In review<span class="c-count">4</span></button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-hash | token | — | Hash written when the tab is selected. |
| aria-selected | true or false | false | The open tab. |
| aria-controls | id | — | Panel this tab shows. |
| c-count | text | — | Count, set in tabular numbers. |
Keyboard
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | Moves across tabs and selects. |
| Tab | Leaves the tab list. |
Accessibility
- The row is a tablist and each control is a tab.
- The panel is labelled by its tab.
- Counts are text inside the name.
Motion
- The panel swaps without an enter animation.
Pattern origin
Pattern type: a tab row on a list, addressed by the URL hash.