Button Group

React Button Group components are used to group related actions together. They help present multiple buttons as a single unit, making it easier for users to understand available options.

This Button Group component is built with React and styled using Tailwind CSS, providing consistent spacing, alignment, and visual grouping.

Installation

Usage

Import the component and wrap related buttons inside it.

import { ButtonGroup } from "@/registry/core/button-group";

export default () => (
  <ButtonGroup>
    <button>Day</button>
    <button>Week</button>
    <button>Month</button>
  </ButtonGroup>
);

Examples

Variants

Use variants to change the visual style of the button group.

<ButtonGroup variant="primary">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</ButtonGroup>

<ButtonGroup variant="secondary">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</ButtonGroup>

Sizes

Adjust the size to match surrounding UI elements.

<ButtonGroup size="sm">
  <button>Small</button>
  <button>Group</button>
</ButtonGroup>

<ButtonGroup size="md">
  <button>Medium</button>
  <button>Group</button>
</ButtonGroup>

<ButtonGroup size="lg">
  <button>Large</button>
  <button>Group</button>
</ButtonGroup>

API Reference

ButtonGroup

Extends div element props.

Notes

• Use standard <button> elements as children for proper styling
• First and last buttons automatically receive rounded corners
• Buttons are visually connected with dividers that match the variant
• Hover states are applied consistently across all buttons
• All buttons share consistent padding and sizing based on the size prop