---
title: "Button Group"
description: "İlişkili butonları, input ve select'leri tek bir bitişik grupta birleştirir."
---

<Callout type="info" title="Ne zaman kullanılır">
Araç çubuklarında aynı nesneye ait aksiyonlar, bölünmüş buton (aksiyon + seçenek menüsü), input ile birleşik arama butonu veya birim etiketi. Görünüm değiştirmek için [Segmented Control](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/segmented-control) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/button-group
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Araç çubuğu ve bölünmüş buton

outline butonlar tek bir yükseltilmiş yüzey gibi birleşir. Bölünmüş butonda ana aksiyon solda, seçenekler DropdownMenu'de.

**Örnek: Araç çubuğu** (`button-group/toolbar`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button-group/toolbar)

```tsx
import { ChevronDownIcon, CopyIcon, DownloadIcon, PencilIcon, PrinterIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export default function ButtonGroupToolbar() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ButtonGroup aria-label="Sipariş işlemleri">
        <Button variant="outline">
          <PencilIcon data-icon="inline-start" />
          Düzenle
        </Button>
        <Button variant="outline">
          <PrinterIcon data-icon="inline-start" />
          Yazdır
        </Button>
        <Button variant="outline" size="icon" aria-label="Kopyala">
          <CopyIcon />
        </Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Dışa aktar">
        <Button>
          <DownloadIcon data-icon="inline-start" />
          Dışa aktar
        </Button>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button size="icon" aria-label="Biçim seç">
              <ChevronDownIcon />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-40">
            <DropdownMenuItem>CSV</DropdownMenuItem>
            <DropdownMenuItem>Excel</DropdownMenuItem>
            <DropdownMenuItem>PDF</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
    </div>
  )
}
```

### Input, select ve etiket

Input'u bir butonla, select'i bir input'la birleştirin. ButtonGroupText birim veya önek gösterir.

**Örnek: Input ile** (`button-group/input`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/button-group/input)

```tsx
import { SearchIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ButtonGroupInput() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <ButtonGroup className="w-full">
        <Input placeholder="Sipariş no veya müşteri" aria-label="Sipariş ara" />
        <Button variant="outline" size="icon" aria-label="Ara">
          <SearchIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup className="w-full">
        <Select defaultValue="percent">
          <SelectTrigger aria-label="İndirim tipi">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="percent">Yüzde</SelectItem>
            <SelectItem value="amount">Tutar</SelectItem>
          </SelectContent>
        </Select>
        <Input defaultValue="15" inputMode="decimal" aria-label="İndirim değeri" />
        <ButtonGroupText>%</ButtonGroupText>
      </ButtonGroup>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Grup içinde aynı variant'ı kullanın.
- Yalnızca ikonlu butonlara aria-label verin; gruba aria-label ile ad verin.

**Yapmayın:**

- Birbiriyle ilgisiz aksiyonları gruplamayın.
- Bir gruba dörtten fazla buton koymayın; fazlasını DropdownMenu'ye taşıyın.

## API

### `ButtonGroup`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | horizontal yan yana, vertical alt alta birleştirir. |

### `ButtonGroupText`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Alt öğe olarak render eder, örn. bir Label. |

`ButtonGroupSeparator` iki buton arasına ince bir ayraç koyar.