Component

Button Group

A set of related buttons joined into a single connected control. Ideal for toggleable or segmented options.

Usage

Use button groups for tightly related actions or view-switching (e.g. List / Grid). Avoid grouping more than 5 buttons.

Playground

Preview

Configure

Variant

Code

"use client"

import { useState } from "react"
import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group"

export function ViewSwitcher() {
  const [active, setActive] = useState(0)

  return (
    <ButtonGroup variant="outline">
      <ButtonGroupItem variant="outline" active={active === 0} onClick={() => setActive(0)}>Day</ButtonGroupItem>
      <ButtonGroupItem variant="outline" active={active === 1} onClick={() => setActive(1)}>Week</ButtonGroupItem>
      <ButtonGroupItem variant="outline" active={active === 2} onClick={() => setActive(2)}>Month</ButtonGroupItem>
    </ButtonGroup>
  )
}

Do

Use for 2–5 closely related options
Visually distinguish the active/selected button
Keep button labels short, 1–2 words each

Don't

Don't use more than 5 buttons in a group, use a Select instead
Don't mix icon-only and label buttons in the same group