Badges - Korubin

Temel Badge Türleri

Primary Secondary Success Warning Danger

İkonlu Badge'ler

Verified Active Pending Error 5 Tasks

Bildirim Badge'leri

3

12

5

JD

99+

Durum Badge'leri

John Doe

Frontend Developer

Online

Jane Smith

UI Designer

Away

Mike Johnson

Backend Developer

Offline

Badge Boyutları

Extra Small Small Medium Large Extra Large

Hap Şeklinde Badge'ler

React TypeScript Tailwind Node.js JavaScript HTML

Kaldırılabilir Badge'ler

Design Development Marketing Sales

Avatar ile Badge'ler

JD

John Doe

JS

Jane Smith

MJ

Mike Johnson

Çerçeveli Badge'ler

Primary Secondary Accent Success Warning Danger

Kullanım

<!-- Temel Badge -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">Primary</span>

<!-- İkonlu Badge -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800">
    <svg class="w-3 h-3 mr-1">...</svg>
    Active
</span>

<!-- Bildirim Badge -->
<div class="relative">
    <button class="px-4 py-2 border-2 border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white font-medium rounded-lg transition-colors duration-200">Messages</button>
    <span class="absolute -top-2 -right-2 badge badge-danger px-2">
        3
    </span>
</div>

<!-- Durum Badge -->
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800">
    <span class="w-2 h-2 bg-success-600 rounded-full mr-1.5"></span>
    Online
</span>

<!-- Kaldırılabilir Badge -->
<span class="badge badge-primary rounded-full px-3 py-1">
    <span>Tag</span>
    <button onclick="this.parentElement.remove()">
        <svg class="w-3 h-3">...</svg>
    </button>
</span>

<!-- Badge Türleri -->
badge-primary    - Primary renk
badge-secondary  - Secondary renk
badge-accent     - Accent renk
badge-success    - Başarı durumu
badge-warning    - Uyarı durumu
badge-danger     - Hata durumu