Button Group

Joins related buttons, inputs and menus into one control with shared borders.

Usage

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

<ButtonGroup>
  <Button variant="outline">Reply</Button>
  <Button variant="outline">Archive</Button>
</ButtonGroup>

Stack it with orientation="vertical". Nest groups to put a gap between sets.

Examples

With input

ButtonGroupText holds a fixed prefix or suffix; inputs and buttons join the same edge.

https://

Guidelines

Group only actions on the same thing. Unrelated actions get separate buttons with space between them.
A split button (action plus menu) needs a ButtonGroupSeparator between the two halves when they're solid.
Icon-only buttons inside a group still need aria-label.
For a set of options where one stays selected, use Toggle Group.

Button

Trigger an action. Brand for the one primary action per view, default for everything else.

Calendar

A month grid for picking a date or a range. Pair it with Popover for a date picker.

On this page

Usage Examples With input Guidelines