Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

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.

Etiket bileşenleri, içeriği kategorize etmek, filtrelemek veya etiketlemek için kullanılan küçük, etiketli bilgi parçalarını görüntüler. Anlamsal HTML ve esnek stil ile oluşturulan etiketler, kullanıcıların içerik türünü, durumunu veya kategorisini hızlı bir şekilde tanımlamasına yardımcı olur. Frutjam etiket sistemi birden fazla boyutu, rengi, stili ve şekli destekler; beceri listeleri, makale kategorileri, durum etiketleri ve içerik meta verileri için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
tagTemelİçeriği kategorilere ayırmak veya tanımlamak için satır içi etiket
tag-outlineStilRenkli kenarlıklı şeffaf dolgu
tag-softStilSessiz renkli arka plan
tag-squareStilHafif yuvarlama (varsayılan haptan daha az)
tag-removeDeğiştiriciEtiketin içindeki reddet/kaldır düğmesi
tag-xsBoyutEkstra küçük (0,6875rem yazı tipi)
tag-smBoyutKüçük (0,75rem yazı tipi)
tag-mdBoyutOrta (0,8125rem yazı tipi, varsayılan)
tag-lgBoyutBüyük (0,9375rem yazı tipi)
tag-xlBoyutEkstra büyük (1rem yazı tipi)
tag-primaryRenkBirincil tema rengi
tag-secondaryRenkİkincil tema rengi
tag-accentRenkVurgu teması rengi
tag-neutralRenkNötr tema rengi
tag-infoRenkBilgi anlamsal rengi
tag-successRenkBaşarı anlamsal rengi
tag-warningRenkUyarı anlamsal rengi
tag-errorRenkHata anlamsal rengi

Temel Kullanım

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>

Etiket Boyutları

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>

Etiket Renkleri

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>

Etiket Stilleri

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>

Etiket Şekilleri

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>

Simgeli Etiket

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>

Kapatılabilir Etiketler

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>

Etiket Listesi

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>