Shadcn Button Group

A container component that groups multiple buttons together, removing borders between adjacent buttons and creating a cohesive visual unit.

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

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button>React</Button>
      <Button>Vue</Button>
      <Button>Svelte</Button>
    </ButtonGroup>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add button-group

Usage

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

<ButtonGroup>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

Examples

Button Group Colors

Button group components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different action groups.

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

export function ButtonGroupColors() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup>
        <Button>React</Button>
        <Button>Vue</Button>
        <Button>Svelte</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="secondary">React</Button>
        <Button variant="secondary">Vue</Button>
        <Button variant="secondary">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button className="border-blue-500 bg-blue-500 text-white hover:bg-blue-600">
          React
        </Button>
        <Button className="border-blue-500 bg-blue-500 text-white hover:bg-blue-600">
          Vue
        </Button>
        <Button className="border-blue-500 bg-blue-500 text-white hover:bg-blue-600">
          Svelte
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button className="border-green-500 bg-green-500 text-white hover:bg-green-600">
          React
        </Button>
        <Button className="border-green-500 bg-green-500 text-white hover:bg-green-600">
          Vue
        </Button>
        <Button className="border-green-500 bg-green-500 text-white hover:bg-green-600">
          Svelte
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button className="border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600">
          React
        </Button>
        <Button className="border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600">
          Vue
        </Button>
        <Button className="border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600">
          Svelte
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="destructive">React</Button>
        <Button variant="destructive">Vue</Button>
        <Button variant="destructive">Svelte</Button>
      </ButtonGroup>
    </div>
  )
}

Button Group Sizes

Button group components in different sizes (small, medium, large) to accommodate various design contexts and spacing requirements.

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

export function ButtonGroupSizes() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup size="sm">
        <Button size="sm">React</Button>
        <Button size="sm">Vue</Button>
        <Button size="sm">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup size="md">
        <Button>React</Button>
        <Button>Vue</Button>
        <Button>Svelte</Button>
      </ButtonGroup>
      <ButtonGroup size="lg">
        <Button size="lg">React</Button>
        <Button size="lg">Vue</Button>
        <Button size="lg">Svelte</Button>
      </ButtonGroup>
    </div>
  )
}

Button Group Variants

Button group components with different visual styles including ghost, outline, solid, and gradient variants, allowing you to choose the appearance that best fits your design system.

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

export function ButtonGroupVariants() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup variant="ghost">
        <Button variant="ghost">React</Button>
        <Button variant="ghost">Vue</Button>
        <Button variant="ghost">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="outline">
        <Button variant="outline">React</Button>
        <Button variant="outline">Vue</Button>
        <Button variant="outline">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="solid">
        <Button>React</Button>
        <Button>Vue</Button>
        <Button>Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="gradient">
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          React
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          Vue
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          Svelte
        </Button>
      </ButtonGroup>
    </div>
  )
}

Button Group With Icon

Button group components that include icons alongside text labels, enhancing visual recognition and making it easier for users to quickly identify button actions.

import { Bold, Italic, Underline } from "lucide-react"

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

export function ButtonGroupWithIcon() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup variant="ghost">
        <Button variant="ghost">
          <Bold className="mr-1.5 h-4 w-4" />
          Bold
        </Button>
        <Button variant="ghost">
          <Italic className="mr-1.5 h-4 w-4" />
          Italic
        </Button>
        <Button variant="ghost">
          <Underline className="mr-1.5 h-4 w-4" />
          Underline
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="outline">
        <Button variant="outline">
          <Bold className="mr-1.5 h-4 w-4" />
          Bold
        </Button>
        <Button variant="outline">
          <Italic className="mr-1.5 h-4 w-4" />
          Italic
        </Button>
        <Button variant="outline">
          <Underline className="mr-1.5 h-4 w-4" />
          Underline
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="solid">
        <Button>
          <Bold className="mr-1.5 h-4 w-4" />
          Bold
        </Button>
        <Button>
          <Italic className="mr-1.5 h-4 w-4" />
          Italic
        </Button>
        <Button>
          <Underline className="mr-1.5 h-4 w-4" />
          Underline
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="gradient">
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          <Bold className="mr-1.5 h-4 w-4" />
          Bold
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          <Italic className="mr-1.5 h-4 w-4" />
          Italic
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          <Underline className="mr-1.5 h-4 w-4" />
          Underline
        </Button>
      </ButtonGroup>
    </div>
  )
}

Block Level Button Group

Button group components that span the full width of their container, ideal for mobile interfaces or when you want to maximize button visibility and touch targets.

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

export function BlockLevelButtonGroup() {
  return (
    <div className="flex w-full flex-col gap-4">
      <ButtonGroup variant="ghost" fullWidth>
        <Button variant="ghost" className="flex-1">
          React
        </Button>
        <Button variant="ghost" className="flex-1">
          Vue
        </Button>
        <Button variant="ghost" className="flex-1">
          Svelte
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="outline" fullWidth>
        <Button variant="outline" className="flex-1">
          React
        </Button>
        <Button variant="outline" className="flex-1">
          Vue
        </Button>
        <Button variant="outline" className="flex-1">
          Svelte
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="solid" fullWidth>
        <Button className="flex-1">React</Button>
        <Button className="flex-1">Vue</Button>
        <Button className="flex-1">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="gradient" fullWidth>
        <Button className="from-primary to-primary/80 flex-1 bg-gradient-to-r">
          React
        </Button>
        <Button className="from-primary to-primary/80 flex-1 bg-gradient-to-r">
          Vue
        </Button>
        <Button className="from-primary to-primary/80 flex-1 bg-gradient-to-r">
          Svelte
        </Button>
      </ButtonGroup>
    </div>
  )
}

Pill Button Group

Button group components with fully rounded (pill) corners, providing a softer, more modern appearance while maintaining the grouped button functionality.

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

export function PillButtonGroup() {
  return (
    <div className="flex flex-col gap-4">
      <ButtonGroup variant="ghost" pill>
        <Button variant="ghost">React</Button>
        <Button variant="ghost">Vue</Button>
        <Button variant="ghost">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="outline" pill>
        <Button variant="outline">React</Button>
        <Button variant="outline">Vue</Button>
        <Button variant="outline">Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="solid" pill>
        <Button>React</Button>
        <Button>Vue</Button>
        <Button>Svelte</Button>
      </ButtonGroup>
      <ButtonGroup variant="gradient" pill>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          React
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          Vue
        </Button>
        <Button className="from-primary to-primary/80 bg-gradient-to-r">
          Svelte
        </Button>
      </ButtonGroup>
    </div>
  )
}

Custom Button Group

A button group component with fully customized styling including custom colors and social media brand colors, demonstrating how to create unique button groups for specific use cases.

import { Dribbble, Facebook, Instagram, Linkedin } from "lucide-react"

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

export function CustomButtonGroup() {
  return (
    <ButtonGroup>
      <Button className="border-[#1877F2] bg-[#1877F2] text-white hover:border-[#1877F2] hover:bg-[#1877F2] hover:brightness-110">
        <Facebook className="mr-1.5 h-4 w-4" />
        Like
      </Button>
      <Button className="border-[#833ab4] bg-[#833ab4] text-white hover:border-[#833ab4] hover:bg-[#833ab4] hover:brightness-110">
        <Instagram className="mr-1.5 h-4 w-4" />
        Follow
      </Button>
      <Button className="border-[#0a66c2] bg-[#0a66c2] text-white hover:border-[#0a66c2] hover:bg-[#0a66c2] hover:brightness-110">
        <Linkedin className="mr-1.5 h-4 w-4" />
        Connect
      </Button>
      <Button className="border-[#ea4c89] bg-[#ea4c89] text-white hover:border-[#ea4c89] hover:bg-[#ea4c89] hover:brightness-110">
        <Dribbble className="mr-1.5 h-4 w-4" />
        Follow
      </Button>
    </ButtonGroup>
  )
}

Props

The button group component is built using class-variance-authority and accepts the following props:

ButtonGroup

Prop	Type	Default	Description
`variant`	`"default" \| "ghost" \| "outline" \| "solid" \| "gradient"`	`"default"`	The visual style variant of the button group
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the buttons in the group
`fullWidth`	`boolean`	`false`	When true, the button group spans the full width
`pill`	`boolean`	`false`	When true, buttons have fully rounded (pill) corners
`className`	`string`	-	Additional CSS classes to apply to the button group
`children`	`ReactNode`	-	The button elements to display in the group

Best Practices

Use button groups to display related actions together
Keep the number of buttons in a group reasonable (typically 3-5 maximum)
Ensure all buttons in a group have consistent styling
Use appropriate variants to match your design system
Consider using full-width button groups on mobile devices
Use icons to enhance visual recognition when appropriate
Maintain consistent sizing within the same button group
Use pill styling for a softer, more modern appearance
Ensure sufficient contrast for accessibility
Group buttons that perform related or complementary actions

The button group component provides a flexible and accessible way to display multiple related buttons as a cohesive unit. It's ideal for toolbars, action groups, filter controls, navigation menus, and any interface where related buttons should be visually grouped together.

Button Calendar

On This Page

Installation Usage Examples Button Group Colors Button Group Sizes Button Group Variants Button Group With Icon Block Level Button Group Pill Button Group Custom Button Group Props ButtonGroup Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.