Button group

Overview

.btn-group is an inline flex row of .btn-group__item buttons sharing one outer border. Add .btn-group--icon when every item is icon-only (square min-width). The active segment uses .btn-group__item--selected and the matching ARIA attribute (aria-pressed or aria-checked).

Prerequisites

• PimentCSS installed, Installation.
• Icons, btn-group__icon slot with Phosphor (ph()) or any SVG library.
• Buttons, same action tokens as standalone Buttons (hover, focus, disabled).

Button item

Each segment is a <button type="button">. Doc-only modifiers --hover show spec states; interactive demos rely on real hover and your script for selection.

Structure

Wrap items in .btn-group with role="group" for toolbars or multi-toggle segments, or role="radiogroup" when only one option may be active. Icon + text pairs use .btn-group__icon and .btn-group__label.

<div class="btn-group" role="group" aria-label="View mode"><button type="button" class="btn-group__item" aria-pressed="false">
    <i class="ph ph-list btn-group__icon" style="font-size:20px" aria-hidden="true"></i>
    <span class="btn-group__label">List view</span>
  </button><button type="button" class="btn-group__item btn-group__item--selected" aria-pressed="true">
    <i class="ph ph-folder btn-group__icon" style="font-size:20px" aria-hidden="true"></i>
    <span class="btn-group__label">Grid view</span>
  </button></div>

Default group

Segmented control with one selected item; siblings use aria-pressed="false". Icons sit before labels when you need both.

Toggle (radiogroup)

When only one option may be active, prefer role="radiogroup" with role="radio" and aria-checked on items.

Icon-only group

Add .btn-group--icon and a distinct aria-label on each button (search, add, bookmark, home below). The active item uses aria-pressed="true".

Behavior in your app

Copy and adapt docs-site/src/lib/button-group-behavior.ts after PimentCSS CSS is loaded. This site calls wireAllButtonGroups() from doc-client.ts for blocks with data-button-group-live.

// See docs-site/src/lib/button-group-behavior.ts (single-select, radiogroup, optional multi-toggle).

Interactive example

Click a segment to select it. Arrow Left and Arrow Right move focus and update the single selected item in this live demo.

Class reference

Customize (Sass)

1. 01

   Button group spacing

   Override padding, gap, and icon size before importing components.
   variables

   @use "pimentcss-design-system" with (
     $btn-group-item-px: 1rem,
     $btn-group-item-py: 0.5rem,
     $btn-group-item-gap: 0.5rem,
     $btn-group-icon-size: 1.25rem
   );

2. 02

   Rebuild CSS

   Run after editing _button-group.scss or tokens.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps