Badge Component
CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Rozet bileşenleri, durum bilgilerini vurgulamak, kategorilere ayırmak veya görüntülemek için kullanılan küçük, kompakt etiketlerdir. Semantik HTML ve Tailwind CSS ile oluşturulan rozetler, tablolara, kartlara, kullanıcı profillerine ve bildirim sistemlerine esnek entegrasyon için birden fazla boyutu, rengi ve stili destekler. Hafif ve erişilebilir rozetler, görsel karmaşa yaratmadan bilgi hiyerarşisini geliştirir.
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 |
|---|---|---|
| badge | Temel | Küçük satır içi etiket |
| badge-outline | Stil | Renkli kenarlıklı şeffaf dolgu |
| badge-soft | Stil | Sessiz renkli arka plan |
| badge-ghost | Stil | Kenarlıksız ince arka plan |
| badge-dashed | Stil | Kesikli kenarlık stili |
| badge-pill | Stil | Tamamen yuvarlak hap şekli |
| badge-rounded | Stil | Orta yuvarlama |
| badge-circle | Stil | Tek karakterler veya sayılar için eşit genişlikte daire |
| badge-square | Stil | Yuvarlaması olmayan kare |
| badge-xs | Boyut | Ekstra küçük |
| badge-sm | Boyut | Küçük |
| badge-md | Boyut | Orta (varsayılan) |
| badge-lg | Boyut | Büyük |
| badge-xl | Boyut | Ekstra büyük |
| badge-2xl | Boyut | 2× ekstra büyük |
| badge-primary | Renk | Birincil tema rengi |
| badge-secondary | Renk | İkincil tema rengi |
| badge-accent | Renk | Vurgu teması rengi |
| badge-neutral | Renk | Nötr tema rengi |
| badge-info | Renk | Bilgi anlamsal rengi |
| badge-success | Renk | Başarı anlamsal rengi |
| badge-warning | Renk | Uyarı anlamsal rengi |
| badge-error | Renk | Hata anlamsal rengi |
Temel Kullanım
Badge
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
Rozet Boyutları
Xsmall
Small
Medium
Large
Xlarge
2XLarge
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
Rozet Renkleri
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
Rozet Stilleri
Yumuşak Rozetler
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
Taslak Rozetleri
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
Kesikli Rozetler
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
Hayalet Rozetleri
Ghost
html
<span class="badge badge-ghost">Ghost</span> |
Rozet Şekilleri
Yuvarlak Rozet
10
html
<span class="badge badge-error badge-rounded">10</span> |
Hap Rozeti
Pill badge
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
Kare Rozet
99+
html
<span class="badge badge-neutral badge-square">99+</span> |
Daire Rozeti
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
Rozet Göstergeleri
Boş rozetler durum göstergeleri veya bildirim noktaları için mükemmeldir.
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
Rozet Kompozisyonu
Rozetleri simgelerle entegre edin veya bunları düğmeler gibi diğer bileşenlerin içine yerleştirin.
Simgeli Rozet
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
Rozet İçi Düğmesi
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |