Chip

Chip

Lencana informasi kecil untuk menampilkan label, status, dan kategori.

Impor komponen Chip dan akses semua bagian menggunakan notasi titik:

Anak-anak teks biasa secara otomatis dibungkus dalam <Chip>.

Meneruskan Kelas Tailwind CSS

Anda dapat menata wadah akar dan slot individual:

import {Chip} from '@heroui/react';
function CustomChip() {
 return (
 <Chip className="rounded-full px-4 py-2 font-bold">
 <Chip className="text-lg uppercase">
 Custom Styled
 </Chip>
 </Chip>
 );
}

Menyesuaikan Kelas Komponen

Untuk menyesuaikan kelas komponen Chip, Anda dapat menggunakan direktif @layer components.

Pelajari lebih lanjut di dokumentasi Tailwind CSS.

@layer components {
 .chip {
 @apply rounded-full text-xs;
 }
 .chip__label {
 @apply font-medium;
 }
 .chip--accent {
 @apply border-accent/20;
 }
 .chip--accent .chip__label {
 @apply text-accent;
 }
}

HeroUI mengikuti metodologi BEM untuk memastikan varian dan status komponen dapat digunakan kembali dan mudah disesuaikan.

Kelas CSS

Komponen Chip menggunakan kelas-kelas CSS berikut:

• .chip - Gaya wadah chip dasar
• .chip__label - Gaya slot teks label

• .chip--accent - Varian warna aksen
• .chip--danger - Varian warna bahaya
• .chip--default - Varian warna bawaan
• .chip--success - Varian warna sukses
• .chip--warning - Varian warna peringatan

• .chip--primary - Varian utama dengan latar belakang terisi
• .chip--secondary - Varian sekunder dengan batas
• .chip--tertiary - Varian tersier dengan latar belakang transparan
• .chip--soft - Varian lembut dengan latar belakang lebih terang

• .chip--sm - Ukuran kecil
• .chip--md - Ukuran sedang (bawaan)
• .chip--lg - Ukuran besar

Chip mendukung penggabungan kelas varian dan warna (misalnya .chip--secondary--accent). Kombinasi berikut memiliki gaya bawaan yang ditentukan:

Varian Utama:

• .chip--primary--accent - Kombinasi utama aksen dengan latar belakang terisi
• .chip--primary--success - Kombinasi utama sukses dengan latar belakang terisi
• .chip--primary--warning - Kombinasi utama peringatan dengan latar belakang terisi
• .chip--primary--danger - Kombinasi utama bahaya dengan latar belakang terisi

Varian Lembut:

• .chip--accent--soft - Kombinasi lembut aksen dengan latar belakang lebih terang
• .chip--success--soft - Kombinasi lembut sukses dengan latar belakang lebih terang
• .chip--warning--soft - Kombinasi lembut peringatan dengan latar belakang lebih terang
• .chip--danger--soft - Kombinasi lembut bahaya dengan latar belakang lebih terang

Catatan: Anda dapat menerapkan gaya kustom ke kombinasi varian-warna apa pun (misalnya .chip--secondary--accent, .chip--tertiary--success) menggunakan direktif @layer components di CSS Anda.

Properti Chip

Properti Chip