Button Group

Attached buttons, inputs and text segments with single-pixel seams, split buttons and vertical stacks.

3 of 12

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/button-group.json

Usage

import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"

<ButtonGroup aria-label="Promote">
  <Button variant="solid">Promote</Button>
  <ButtonGroupSeparator />
  <Button variant="solid" size="icon" aria-label="More options">
    <ChevronDown />
  </Button>
</ButtonGroup>

Examples

With an input

Input sits in the group like any segment. Its focus glow is lifted over the neighbouring borders.

Groups inside a group stay attached and the outer one spaces them apart.

Vertical

orientation="vertical" stacks the segments and squares the inner corners top and bottom.

Sizes

Size each segment as usual; the group only handles seams and corners, so any size attaches cleanly.

API reference

ButtonGroup

Renders a div with role="group". Give it an aria-label when the buttons need context.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"` Direction of the row.	`"horizontal"`
`color`	`NeonColor` Sets --neon for everything inside.	inherited

ButtonGroupText

A static segment, for a prefix like "https://" or a counter. Accepts native div attributes.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"` Height and padding, matching Button.	`"md"`

ButtonGroupSeparator

A one-pixel seam between two segments, for solid buttons whose borders don't show.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"` The rule's direction.	across the group

Accessibility

Neighbours overlap by a pixel, so every seam is a single line.
The hovered, open or focused segment is raised above the others, so its border and focus ring are never covered.
Seams and corners are pure CSS on the group's direct children, so it never inspects or clones them; children passed from a Server Component work the same.
Input and Textarea draw their corners on an inner field box, and the group squares that box too.
Arrow keys aren't added: it's a group of separate buttons. Use Toggle Group for one-of-many choices.