Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Tag

Terakhir diperbarui:

Tag (chip) Tailwind CSS khusus CSS dengan varian warna, gaya lembut, dan tombol yang dapat dilepas. Ukuran XS-LG. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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
tagBasisLabel sebaris untuk mengkategorikan atau mengidentifikasi konten
tag-outlineGayaIsian transparan dengan pinggiran berwarna
tag-softGayaLatar belakang berwarna teredam
tag-squareGayaSedikit membulat (kurang dari pil standar)
tag-removePengubahTombol tutup/hapus di dalam tag
tag-xsUkuranEkstra kecil (font 0,6875rem)
tag-smUkuranKecil (font 0,75rem)
tag-mdUkuranSedang (font 0,8125rem, default)
tag-lgUkuranBesar (font 0,9375rem)
tag-xlUkuranEkstra besar (font 1rem)
tag-primaryWarnaWarna tema utama
tag-secondaryWarnaWarna tema sekunder
tag-accentWarnaWarna tema aksen
tag-neutralWarnaWarna tema netral
tag-infoWarnaInfo warna semantik
tag-successWarnaWarna semantik sukses
tag-warningWarnaWarna semantik peringatan
tag-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

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

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

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

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

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Menandai yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP