Button Group

Usage

import { Button } from "@tulipfarm/sprout/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@tulipfarm/sprout/button-group";

<ButtonGroup aria-label="Pages">
  <Button variant="outline" disabled={page === 1}>Previous</Button>
  <ButtonGroupSeparator />
  <Button variant="outline" disabled={page === 3}>Next</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical" aria-label="Quantity">
  <ButtonGroupText>Quantity: {quantity}</ButtonGroupText>
  <Button variant="outline" aria-label="Add one"><Plus /></Button>
</ButtonGroup>

ButtonGroup renders a div with role="group". orientation is "horizontal", the default, or"vertical". Direct children with a data-slot, such as Sprõut buttons, lose their inner corners and the border where they meet. The outer corners use --sprout-radius-control for every button size.

ButtonGroupText is a muted cell for a label or value. It acceptsrender, so it can be an output or alabel. Icons inside it are 16px unless they have a size class.

ButtonGroupSeparator is a Separator with the"input" tone. It runs across the group, so it is "vertical" by default and must be "horizontal" in a vertical group. Use it between filled buttons, which have no border of their own.

A group that holds other groups spaces them 8px apart. A directinput child grows to fill the free space. buttonGroupVariants({ orientation }) returns the same class names for other elements.

Accessibility

Give each group an aria-label that names what it controls. Every button stays in the tab order, and a focused button draws its ring above its neighbors. Icon-only buttons need their own aria-label. Render a changing value with render={<output />} so screen readers hear it.

Color changes follow the theme in 120ms and stop when reduced motion is requested. In forced colors mode text cells keep a visible border.

Theme tokens

Text cells use --sprout-secondary, --sprout-text, and --sprout-input. Separators use --sprout-input. Radius follows --sprout-radius-control.