Button Group

Groups a series of buttons together on a single line or stack.

Default

Wrapping a set of Buttons in a ButtonGroup joins them into a single horizontal control.

tsx

import { ButtonGroup, Button } from "@hummingbirdui/react";

export default function ButtonGroupDefault() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  );
}

Vertical

Setting orientation="vertical" stacks the buttons instead.

tsx

import { ButtonGroup, Button } from "@hummingbirdui/react";

export default function ButtonGroupVertical() {
  return (
    <ButtonGroup orientation="vertical">
      <Button variant="outline">Top</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Bottom</Button>
    </ButtonGroup>
  );
}

Sizes

The size prop scales every button in the group: sm, md (default), or lg.

tsx

import { ButtonGroup, Button } from "@hummingbirdui/react";

export default function ButtonGroupSizes() {
  return (
    <div className="flex flex-col items-start gap-4">
      <ButtonGroup size="sm">
        <Button variant="outline">Left</Button>
        <Button variant="outline">Middle</Button>
        <Button variant="outline">Right</Button>
      </ButtonGroup>
      <ButtonGroup size="md">
        <Button variant="outline">Left</Button>
        <Button variant="outline">Middle</Button>
        <Button variant="outline">Right</Button>
      </ButtonGroup>
      <ButtonGroup size="lg">
        <Button variant="outline">Left</Button>
        <Button variant="outline">Middle</Button>
        <Button variant="outline">Right</Button>
      </ButtonGroup>
    </div>
  );
}

ButtonToolbar combines multiple groups into a single toolbar.

tsx

import { ButtonToolbar, ButtonGroup, Button } from "@hummingbirdui/react";

export default function ButtonGroupToolbar() {
  return (
    <ButtonToolbar className="flex gap-2">
      <ButtonGroup>
        <Button variant="outline">Bold</Button>
        <Button variant="outline">Italic</Button>
        <Button variant="outline">Underline</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Left</Button>
        <Button variant="outline">Center</Button>
        <Button variant="outline">Right</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

API Reference

ButtonGroup

Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the buttons.
size	`"sm" \| "md" \| "lg"`	`"md"`	Size applied to every button in the group.
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

ButtonToolbar

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render as a child element instead of the default.
className	`string`	—	Additional classes merged with the generated classes.

Styling

Hummingbird React button group is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available button group classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousBreadcrumb NextButton