Button Group

Overview

ButtonGroup renders a plain div[role=group] that collapses the inner borders and corner radii of its children so they read as one control. Orientation drives which corners/borders are flattened via a cva-style class switch; there is no headless primitive underneath, so all behavior (there is none beyond the CSS) lives in the component itself.

Install

navius add button-group --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsButtonGroup>
    <ZitsButton Variant="outline">Archive</ZitsButton>
    <ZitsButton Variant="outline">Report</ZitsButton>
    <ZitsButton Variant="outline">Snooze</ZitsButton>
</ZitsButtonGroup>

Parts and props

Prop	Type	Default	Description
Orientation	string	"horizontal"	horizontal | vertical. Selects which adjacent-child borders/radii are flattened.

ZitsButtonGroupSeparator adds:

Prop	Type	Default	Description
Orientation	string	"vertical"	vertical | horizontal. Sets aria-orientation/data-orientation and the sizing side.

ZitsButtonGroupText takes only ChildContent/Attributes.

Styling surface

Attributes on every part is merged with its preset class set via Cn.Merge, caller classes applied last.

Parameter	Values
Orientation (group, separator)	horizontal · vertical

Data attribute hooks

Part	Attribute	Description
Root	data-slot="button-group", data-orientation	Emitted by ZitsButtonGroup itself; data-orientation drives the descendant-selector CSS that flattens borders on adjacent children.
Separator	data-slot="button-group-separator", data-orientation	Emitted by ZitsButtonGroupSeparator itself; drives the horizontal/vertical sizing classes.
Text	data-slot="button-group-text"	Emitted by ZitsButtonGroupText itself.

ButtonGroup is presentational: the root is a div[role=group] with no keyboard or focus behavior of its own, since it groups already-interactive children (typically ZitsButton) rather than owning interaction itself.