---
title: "Action Bar"
description: "Sadece ikonlu bir araç çubuğu. Hover veya klavye odağında etiketler açılır, vurgu pill'i öğeler arasında kayar."
---

<Callout type="info" title="Ne zaman kullanılır">
Rapor ve detay sayfalarında, birbirine bağlı 3 ila 6 aksiyonu az yerde toplamak için.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/action-bar
```

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

## Örnekler

### Rapor araç çubuğu

Taslaklar sayaç rozeti taşır. Ana aksiyon variant="solid" ile sonda.

**Örnek: Rapor araç çubuğu** (`action-bar/report`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/action-bar/report)

```tsx
import { FileTextIcon, PrinterIcon, RefreshCwIcon, SendIcon, SlidersHorizontalIcon } from "lucide-react"
import { toast } from "sonner"

import { ActionBar } from "@/components/ikas/action-bar"

export default function ActionBarReport() {
  return (
    <ActionBar
      label="Rapor aksiyonları"
      items={[
        { id: "params", label: "Parametreler", icon: <SlidersHorizontalIcon data-anim="pop" />, onClick: () => toast("Parametreler açıldı") },
        { id: "refresh", label: "Yenile", icon: <RefreshCwIcon data-anim="spin" />, onClick: () => toast("Rapor yenilendi") },
        { id: "drafts", label: "Taslaklar", icon: <FileTextIcon data-anim="wiggle" />, badge: 3, onClick: () => toast("3 taslak") },
        { id: "print", label: "Yazdır", icon: <PrinterIcon data-anim="drop" />, onClick: () => toast("Yazdırılıyor") },
        { id: "send", label: "Gönder", icon: <SendIcon data-anim="lift" />, variant: "solid", onClick: () => toast.success("Rapor gönderildi") },
      ]}
    />
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- En fazla bir solid öğe kullanın ve sona koyun.
- İkonlara anlamlarına uyan data-anim verin.

**Yapmayın:**

- Etiket olmadan anlaşılmayan aksiyonları buraya koymayın; dokunmatik cihazlarda etiket görünmez.

## API

### `ActionBar`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `items` (zorunlu) | `ActionBarItem[]` | - | { id, label, icon, onClick?, badge?, variant?: "ghost" \| "solid", disabled? } |
| `label` (zorunlu) | `string` | - | Araç çubuğunun erişilebilir adı (role="toolbar"). |
| `className` | `string` | - | Ray kapsayıcısı. |