Components / Button Group

Button Group

Groups related buttons and controls into a single segmented unit: inner borders and corner radii collapse so the children read as one control. Pure Tailwind, no behaviour required.

Examples

Drop ZitsButton children inside a ZitsButtonGroup. The group flattens the joining edges automatically.

razor

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

Orientation

Set Orientation to vertical to stack the children.

razor

<ZitsButtonGroup Orientation="vertical">
    <ZitsButton Variant="outline">Top</ZitsButton>
    <ZitsButton Variant="outline">Middle</ZitsButton>
    <ZitsButton Variant="outline">Bottom</ZitsButton>
</ZitsButtonGroup>

Text & separator

Use ZitsButtonGroupText for a static label segment and ZitsButtonGroupSeparator to divide segments.

https://

razor

<ZitsButtonGroup>
    <ZitsButtonGroupText>https://</ZitsButtonGroupText>
    <ZitsButton Variant="outline">example.com</ZitsButton>
    <ZitsButtonGroupSeparator />
    <ZitsButton Variant="outline">Copy</ZitsButton>
</ZitsButtonGroup>

Installation

Terminal bash

navius add button-group

API reference

ZitsButtonGroup

Prop	Type	Default
Orientation	string	"horizontal"
ChildContent	RenderFragment?	-

ZitsButtonGroupSeparator

Prop	Type	Default
Orientation	string	"vertical"