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

npx @tailgrids/cli add button-group

Usage

Import the component and wrap related buttons inside it.

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

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

Examples

Variants

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

Sizes

Adjust the size to match surrounding UI elements.

Custom

Create a custom styled example using className to override styles.

API Reference

ButtonGroup

Extends div element props.