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.