Tag Component
CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Komponen tag menampilkan potongan informasi kecil yang diberi label, digunakan untuk mengkategorikan, memfilter, atau memberi label pada konten. Dibangun dengan HTML semantik dan gaya fleksibel, tag membantu pengguna mengidentifikasi jenis konten, status, atau kategori dengan cepat. Sistem tag Frutjam mendukung berbagai ukuran, warna, gaya, dan bentuk—ideal untuk daftar keahlian, kategori artikel, label status, dan metadata konten.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| tag | Basis | Label sebaris untuk mengkategorikan atau mengidentifikasi konten |
| tag-outline | Gaya | Isian transparan dengan pinggiran berwarna |
| tag-soft | Gaya | Latar belakang berwarna teredam |
| tag-square | Gaya | Sedikit membulat (kurang dari pil standar) |
| tag-remove | Pengubah | Tombol tutup/hapus di dalam tag |
| tag-xs | Ukuran | Ekstra kecil (font 0,6875rem) |
| tag-sm | Ukuran | Kecil (font 0,75rem) |
| tag-md | Ukuran | Sedang (font 0,8125rem, default) |
| tag-lg | Ukuran | Besar (font 0,9375rem) |
| tag-xl | Ukuran | Ekstra besar (font 1rem) |
| tag-primary | Warna | Warna tema utama |
| tag-secondary | Warna | Warna tema sekunder |
| tag-accent | Warna | Warna tema aksen |
| tag-neutral | Warna | Warna tema netral |
| tag-info | Warna | Info warna semantik |
| tag-success | Warna | Warna semantik sukses |
| tag-warning | Warna | Warna semantik peringatan |
| tag-error | Warna | Kesalahan warna semantik |
Penggunaan Dasar
Tag
Another tag
Third tag
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
Ukuran Tanda
Extra Small
Small
Medium
Large
html
1 2 3 4 | <div class="tag tag-xs">Extra Small</div> <div class="tag tag-sm">Small</div> <div class="tag tag-md">Medium</div> <div class="tag tag-lg">Large</div> |
Warna Tandai
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 | <div class="tag">Default</div> <div class="tag tag-primary">Primary</div> <div class="tag tag-secondary">Secondary</div> <div class="tag tag-accent">Accent</div> <div class="tag tag-info">Info</div> <div class="tag tag-success">Success</div> <div class="tag tag-warning">Warning</div> <div class="tag tag-error">Error</div> |
Gaya Tag
Default
Outline
Soft
Dashed
html
1 2 3 4 | <div class="tag tag-primary">Default</div> <div class="tag tag-primary tag-outline">Outline</div> <div class="tag tag-secondary tag-soft">Soft</div> <div class="tag tag-accent tag-dashed">Dashed</div> |
Bentuk Tag
Square
Rounded
Pill
C
html
1 2 3 4 | <div class="tag">Square</div> <div class="tag tag-rounded">Rounded</div> <div class="tag tag-pill">Pill</div> <div class="tag tag-circle">C</div> |
Tandai dengan Ikon
Starred
html
1 2 3 4 | <div class="tag tag-primary"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg> Starred </div> |
Tag yang Dapat Ditutup
JavaScript
React
TypeScript
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tag tag-primary"> JavaScript <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-secondary"> React <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-accent"> TypeScript <button class="tag-remove" aria-label="Close">×</button> </div> |
Daftar Tag
JavaScript
React
CSS
UI Design
Frontend
Production
html
1 2 3 4 5 6 7 8 | <div class="flex flex-wrap gap-2"> <div class="tag">JavaScript</div> <div class="tag tag-primary">React</div> <div class="tag tag-secondary">CSS</div> <div class="tag tag-accent">UI Design</div> <div class="tag tag-info">Frontend</div> <div class="tag tag-success">Production</div> </div> |