Button Group

Preview

Installation

npx shadcn@latest add @cubby-ui/button-group

Usage

import { ButtonGroup } from "@/components/ui/cubby-ui/button-group";

<ButtonGroup>
  <ButtonGroup />
</ButtonGroup>

Examples

Orientation

Use the orientation prop to change the layout direction of the button group.

Size

Button groups inherit the size of their child buttons. Use different button sizes to create compact or large button groups.

Nested

Button groups can be nested to create more complex layouts like pagination controls.

Separator

Use ButtonGroupSeparator to visually divide buttons within a group. The separator is not necessary if using button variants that have a border already.

With Input

Integrate input fields directly into button groups for search bars and similar patterns.

Complex Input Group

Create sophisticated input layouts with nested button groups, inputs, and toggleable features.

With Dropdown

Combine buttons with dropdown menus for actions that need additional options.

With Select

Integrate select components for dynamic forms and input combinations.

With Popover

Use popovers within button groups to provide contextual interfaces and assistants.

API Reference

The Button Group is a custom layout component for grouping related buttons. All props listed below are custom to this implementation.

Props

ButtonGroup

Container that groups buttons together with connected styling. Renders a div with role="group".

ButtonGroupSeparator

Visual divider between buttons within a group. Wraps the Separator component. Accepts all Separator props.

ButtonGroupText

Styled container for non-button content (text, icons) within a button group. Renders a div with muted background styling. Accepts standard div props.