Button Group

Installation

›pnpm dlx shadcn@latest add @evolphin/button-group

Usage

import {
  ButtonGroup,
  ButtonGroupText,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";

<ButtonGroup>
  <Button variant="outline">One</Button>
  <Button variant="outline">Two</Button>
  <Button variant="outline">Three</Button>
</ButtonGroup>

Type Definitions

interface ButtonGroupProps {
  /** The orientation of the button group */
  orientation?: "horizontal" | "vertical";     
ButtonGroupProps.orientation?: "horizontal" | "vertical" | undefined
The orientation of the button group
}

Examples

Horizontal

Vertical

With Icon

With Text and Separator

Format

API Reference

ButtonGroup

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The orientation of the button group.
`className`	`string`	-	Additional CSS classes

ButtonGroupText

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.
`className`	`string`	-	Additional CSS classes

ButtonGroupSeparator

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	The orientation of the separator.
`className`	`string`	-	Additional CSS classes

Search

On this page