On this page

Button Group

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

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  );
}

Installation

pnpx starwind@latest add button-group

npx starwind@latest add button-group

yarn dlx starwind@latest add button-group

Usage

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

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  );
}

Composition

Place buttons, inputs, text, or separators inside the group:

ButtonGroup
├── Button or Input
├── ButtonGroupSeparator
└── ButtonGroupText

Orientation

Set the orientation prop to change the button group layout.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import IconPlus from "@tabler/icons/outline/plus.svg";
import IconMinus from "@tabler/icons/outline/minus.svg";
---

<ButtonGroup orientation="vertical" class="h-fit">
  <Button variant="outline" size="icon">
    <IconPlus />
  </Button>
  <Button variant="outline" size="icon">
    <IconMinus />
  </Button>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { IconPlus as IconPlus } from "@tabler/icons-react";
import { IconMinus as IconMinus } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup orientation="vertical" className="h-fit">
        <Button variant="outline" size="icon">
          <IconPlus />
        </Button>
        <Button variant="outline" size="icon">
          <IconMinus />
        </Button>
      </ButtonGroup>
    </>
  );
}

Size

Control the size of buttons using the size prop on individual buttons.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import IconPlus from "@tabler/icons/outline/plus.svg";
---

<div class="flex flex-col items-start gap-8">
  <ButtonGroup>
    <Button variant="outline" size="sm">Small</Button>
    <Button variant="outline" size="sm">Button</Button>
    <Button variant="outline" size="sm">Group</Button>
    <Button variant="outline" size="icon-sm">
      <IconPlus />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Default</Button>
    <Button variant="outline">Button</Button>
    <Button variant="outline">Group</Button>
    <Button variant="outline" size="icon">
      <IconPlus />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="lg">Large</Button>
    <Button variant="outline" size="lg">Button</Button>
    <Button variant="outline" size="lg">Group</Button>
    <Button variant="outline" size="icon-lg">
      <IconPlus />
    </Button>
  </ButtonGroup>
</div>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { IconPlus as IconPlus } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <div className="flex flex-col items-start gap-8">
        <ButtonGroup>
          <Button variant="outline" size="sm">Small</Button>
          <Button variant="outline" size="sm">Button</Button>
          <Button variant="outline" size="sm">Group</Button>
          <Button variant="outline" size="icon-sm">
            <IconPlus />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant="outline">Default</Button>
          <Button variant="outline">Button</Button>
          <Button variant="outline">Group</Button>
          <Button variant="outline" size="icon">
            <IconPlus />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="lg">Large</Button>
          <Button variant="outline" size="lg">Button</Button>
          <Button variant="outline" size="lg">Group</Button>
          <Button variant="outline" size="icon-lg">
            <IconPlus />
          </Button>
        </ButtonGroup>
      </div>
    </>
  );
}

Nested

Nest ButtonGroup components to create button groups with spacing.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import IconArrowLeft from "@tabler/icons/outline/arrow-left.svg";
import IconArrowRight from "@tabler/icons/outline/arrow-right.svg";
---

<ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="sm">1</Button>
    <Button variant="outline" size="sm">2</Button>
    <Button variant="outline" size="sm">3</Button>
    <Button variant="outline" size="sm">4</Button>
    <Button variant="outline" size="sm">5</Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="icon-sm" aria-label="Previous">
      <IconArrowLeft />
    </Button>
    <Button variant="outline" size="icon-sm" aria-label="Next">
      <IconArrowRight />
    </Button>
  </ButtonGroup>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { IconArrowLeft as IconArrowLeft } from "@tabler/icons-react";
import { IconArrowRight as IconArrowRight } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="sm">1</Button>
          <Button variant="outline" size="sm">2</Button>
          <Button variant="outline" size="sm">3</Button>
          <Button variant="outline" size="sm">4</Button>
          <Button variant="outline" size="sm">5</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="icon-sm" aria-label="Previous">
            <IconArrowLeft />
          </Button>
          <Button variant="outline" size="icon-sm" aria-label="Next">
            <IconArrowRight />
          </Button>
        </ButtonGroup>
      </ButtonGroup>
    </>
  );
}

Separator

The ButtonGroupSeparator component visually divides buttons within a group.

Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup, ButtonGroupSeparator } from "@/components/starwind/button-group";
import IconCopy from "@tabler/icons/outline/copy.svg";
import IconClipboard from "@tabler/icons/outline/clipboard.svg";
---

<ButtonGroup>
  <Button size="sm">
    <IconCopy />
    Copy
  </Button>
  <ButtonGroupSeparator />
  <Button size="sm">
    <IconClipboard />
    Paste
  </Button>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup, ButtonGroupSeparator } from "@/components/starwind/button-group";
import { IconCopy as IconCopy } from "@tabler/icons-react";
import { IconClipboard as IconClipboard } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <Button size="sm">
          <IconCopy />
          Copy
        </Button>
        <ButtonGroupSeparator />
        <Button size="sm">
          <IconClipboard />
          Paste
        </Button>
      </ButtonGroup>
    </>
  );
}

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup, ButtonGroupSeparator } from "@/components/starwind/button-group";
import IconPlus from "@tabler/icons/outline/plus.svg";
---

<ButtonGroup>
  <Button>Button</Button>
  <ButtonGroupSeparator />
  <Button size="icon">
    <IconPlus />
  </Button>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup, ButtonGroupSeparator } from "@/components/starwind/button-group";
import { IconPlus as IconPlus } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <Button>Button</Button>
        <ButtonGroupSeparator />
        <Button size="icon">
          <IconPlus />
        </Button>
      </ButtonGroup>
    </>
  );
}

Input

Wrap an Input component with buttons.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Input } from "@/components/starwind/input";
import IconSearch from "@tabler/icons/outline/search.svg";
---

<ButtonGroup>
  <Input placeholder="Search..." />
  <Button variant="outline" aria-label="Search">
    <IconSearch />
  </Button>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Input } from "@/components/starwind/input";
import { IconSearch as IconSearch } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <Input placeholder="Search..." />
        <Button variant="outline" aria-label="Search">
          <IconSearch />
        </Button>
      </ButtonGroup>
    </>
  );
}

Select

Pair with a Select component.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Input } from "@/components/starwind/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/starwind/select";
import IconArrowRight from "@tabler/icons/outline/arrow-right.svg";
---

<ButtonGroup>
  <ButtonGroup>
    <Select defaultValue="$">
      <SelectTrigger class="font-mono">
        <SelectValue placeholder="$" />
      </SelectTrigger>
      <SelectContent class="min-w-20">
        <SelectItem value="$"> $ </SelectItem>
        <SelectItem value="€"> € </SelectItem>
        <SelectItem value="£"> £ </SelectItem>
      </SelectContent>
    </Select>
    <Input placeholder="10.00" pattern="[0-9]*" />
  </ButtonGroup>
  <ButtonGroup>
    <Button aria-label="Send" size="icon" variant="outline">
      <IconArrowRight />
    </Button>
  </ButtonGroup>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Input } from "@/components/starwind/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/starwind/select";
import { IconArrowRight as IconArrowRight } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <ButtonGroup>
          <Select defaultValue="$">
            <SelectTrigger className="font-mono">
              <SelectValue placeholder="$" />
            </SelectTrigger>
            <SelectContent className="min-w-20">
              <SelectItem value="$"> $ </SelectItem>
              <SelectItem value="€"> € </SelectItem>
              <SelectItem value="£"> £ </SelectItem>
            </SelectContent>
          </Select>
          <Input placeholder="10.00" pattern="[0-9]*" />
        </ButtonGroup>
        <ButtonGroup>
          <Button aria-label="Send" size="icon" variant="outline">
            <IconArrowRight />
          </Button>
        </ButtonGroup>
      </ButtonGroup>
    </>
  );
}

Create a split button group with a dropdown menu.

---
import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Dropdown, DropdownContent, DropdownItem, DropdownSeparator, DropdownTrigger } from "@/components/starwind/dropdown";
import IconChevronDown from "@tabler/icons/outline/chevron-down.svg";
---

<ButtonGroup>
  <Button variant="outline">Follow</Button>
  <Dropdown>
    <DropdownTrigger asChild>
      <Button variant="outline" size="icon">
        <IconChevronDown />
      </Button>
    </DropdownTrigger>
    <DropdownContent align="end" class="min-w-[200px]">
      <DropdownItem>Mute Conversation</DropdownItem>
      <DropdownItem>Mark as Read</DropdownItem>
      <DropdownItem>Report Conversation</DropdownItem>
      <DropdownSeparator />
      <DropdownItem>Delete Conversation</DropdownItem>
    </DropdownContent>
  </Dropdown>
</ButtonGroup>

import { Button } from "@/components/starwind/button";
import { ButtonGroup } from "@/components/starwind/button-group";
import { Dropdown, DropdownContent, DropdownItem, DropdownSeparator, DropdownTrigger } from "@/components/starwind/dropdown";
import { IconChevronDown as IconChevronDown } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <ButtonGroup>
        <Button variant="outline">Follow</Button>
        <Dropdown>
          <DropdownTrigger asChild>
            <Button variant="outline" size="icon">
              <IconChevronDown />
            </Button>
          </DropdownTrigger>
          <DropdownContent align="end" className="min-w-[200px]">
            <DropdownItem>Mute Conversation</DropdownItem>
            <DropdownItem>Mark as Read</DropdownItem>
            <DropdownItem>Report Conversation</DropdownItem>
            <DropdownSeparator />
            <DropdownItem>Delete Conversation</DropdownItem>
          </DropdownContent>
        </Dropdown>
      </ButtonGroup>
    </>
  );
}

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Button Group

Inherits div attributes.

Contains the following additional props:

Prop Type Default

orientation "horizontal" | "vertical" "horizontal"

Description: Selects the horizontal or vertical layout direction.
Classification: Styled variant

Changelog

View version history v1.1.1 4 releases

v1.1.1

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v1.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.12

Button Group

Installation

Usage

Composition

Orientation

Size

Nested

Separator

Split

Input

Select

Dropdown Menu

API Reference

Button Group

Changelog

v1.1.1

v1.1.0

v1.0.2

v1.0.0