Button Group

Grouped buttons. Free, MIT · Basics › Buttons

Installation

npx valyro-cli@latest add button-group

npx shadcn@latest add https://valyro.xyz/r/button-group.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ButtonGroup } from 'valyro-ui';

Prop	Type	Default
`attached`	`boolean`	`false`	Join buttons into one control (shared borders, outer radius only).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Lay buttons out in a row or a column.
`label`	`string`		Accessible name for the group.

Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit