Chip
Seçilebilir veya kaldırılabilir kompakt değer etiketi.
Chip.tsx
Seçilebilir Çipler & Varyantlar
Frontend8
Backend3
Design System12
Boyutlar & Kaldırılabilir Filtreler
Next.js
React 19
Tailwind v4
TypeScript
Pasif Çip
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/chip.jsonKullanım Örneği
import { Chip } from "@/components/ui/Chip"
<Chip
selected={selected}
onSelectedChange={setSelected}
onRemove={() => removeTag("React")}
removeLabel="React etiketini kaldır"
>
React
</Chip>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| selected | boolean | false | Kontrollü seçili durum ve görsel stili. |
| onSelectedChange | (selected: boolean) => void | — | Seçim durumu değiştirilmek istendiğinde çağrılır. |
| variant | "default" | "sage" | "outline" | "subtle" | "default" | Chip renk ve yüzey varyantı. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Chip boyutu. |
| icon | ReactNode | — | Etiketin solundaki dekoratif içerik. |
| count | number | string | — | Etiketin yanındaki sayaç. |
| onRemove | () => void | — | Kaldırma düğmesini gösterir ve seçildiğinde çağrılır. |
| selectionLabel | string | — | Seçim butonunun erişilebilir özel etiketi. |
| removeLabel | string | "Kaldır" | Kaldırma butonunun erişilebilir etiketi. |
| disabled | boolean | false | Seçme ve kaldırma işlemlerini kapatır. |