Button Group

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeButtonGroupExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeButtonGroupExample/></NativeScope>}

Selected item

selected keeps an item on its hover fill and sets aria-pressed - drive it from state for single or multi-select toolbars.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="button-group" id="selected"/>}

Icon only

iconOnly items collapse to squares - give each an aria-label since there's no visible text.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="button-group" id="icon-only"/>}