Button group
A row of related toggle buttons for view switchers and filters. 2–5 segments.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="px-btn-group" role="group" aria-label="View" data-px-single>
<button type="button" class="px-btn-group__item" aria-pressed="true"><svg class="px-icon" aria-hidden="true">…</svg>Grid</button>
<button type="button" class="px-btn-group__item" aria-pressed="false"><svg class="px-icon" aria-hidden="true">…</svg>List</button>
<button type="button" class="px-btn-group__item" aria-pressed="false"><svg class="px-icon" aria-hidden="true">…</svg>Calendar</button>
</div>Usage
- Use for switching views of the same content.
- Keep labels short; 2–5 segments.
- For a single on/off action, use a Toggle instead.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Text only
Single choice with data-px-single.
<div class="px-btn-group" role="group" aria-label="Range" data-px-single>
<button type="button" class="px-btn-group__item" aria-pressed="false">12 months</button>
<button type="button" class="px-btn-group__item" aria-pressed="true">30 days</button>
<button type="button" class="px-btn-group__item" aria-pressed="false">7 days</button>
<button type="button" class="px-btn-group__item" aria-pressed="false">24 hours</button>
</div>Small
px-btn-group--sm for dense toolbars.
<div class="px-btn-group px-btn-group--sm" role="group" aria-label="Align" data-px-single>
<button type="button" class="px-btn-group__item" aria-pressed="true">Left</button>
<button type="button" class="px-btn-group__item" aria-pressed="false">Center</button>
<button type="button" class="px-btn-group__item" aria-pressed="false">Right</button>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-btn-group | class | Container. Owns the border, radius and clipping. |
px-btn-group__item | class | One segment. |
px-btn-group--sm | class | Small size. |
aria-pressed | attribute | Selected state of a segment. |
data-px-single | attribute | pixels-ui.js keeps one segment pressed. |
Figma properties
Button group6 variants · page “Buttons”Open
A row of related toggle buttons (view switchers, filters). 2–5 segments. The container owns the border, radius and clipping; RTL variants reverse the order and use the Arabic locale.
| Property | Type | Values |
|---|---|---|
| Size | Variant | Small Medium Large |
| Direction | Variant | LTR RTL |
Button group / Item54 variants · page “Buttons”Open
One segment of a Button group. The group container draws the outer border and rounded corners; segments only draw the divider on their right edge (none on the last one). Position is physical (Left / M…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Label” |
| Leading icon | Boolean | — |
| Leading icon swap | Instance swap | — |
| Size | Variant | Small Medium Large |
| State | Variant | Active Hover Pressed Focused Disabled Selected |
| Position | Variant | Left Middle Right |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-button-group-radius | radius-12 | 12px |
--px-button-group-item-padding-x | spacing-16 | 16px |
--px-button-group-item-height | spacing-36 | 36px |
Accessibility
- Wrap in role="group" with an aria-label.
- Each segment is a button with aria-pressed.