mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
103 lines
3.6 KiB
Plaintext
103 lines
3.6 KiB
Plaintext
# Badge
|
|
|
|
<Preview>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="flex w-full flex-wrap gap-2">
|
|
<span class="badge">Badge</span>
|
|
<span class="badge" data-variant="secondary">Secondary</span>
|
|
<span class="badge" data-variant="destructive">Destructive</span>
|
|
<span class="badge" data-variant="outline">Outline</span>
|
|
</div>
|
|
<div class="flex w-full flex-wrap gap-2">
|
|
<span class="badge bg-blue-500 text-white dark:bg-blue-600">
|
|
<svg class="lucide lucide-badge-check" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>
|
|
Verified
|
|
</span>
|
|
<span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">8</span>
|
|
<span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums" data-variant="destructive">99</span>
|
|
<span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums" data-variant="outline">20+</span>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
Add `class="badge"` to an inline element. Add `data-variant` when the badge is not the default primary variant.
|
|
|
|
Inline SVG icons are spaced automatically by the badge gap.
|
|
|
|
```html
|
|
<span class="badge">Badge</span>
|
|
<span class="badge" data-variant="secondary">Secondary</span>
|
|
<span class="badge" data-variant="destructive">Destructive</span>
|
|
<span class="badge" data-variant="outline">Outline</span>
|
|
```
|
|
|
|
Badges support right-to-left layouts through native text flow. Flip directional icons explicitly.
|
|
|
|
## Examples
|
|
|
|
### Primary
|
|
|
|
<Preview>
|
|
<span class="badge">Primary</span>
|
|
</Preview>
|
|
|
|
### Secondary
|
|
|
|
<Preview>
|
|
<span class="badge" data-variant="secondary">Secondary</span>
|
|
</Preview>
|
|
|
|
### Destructive
|
|
|
|
<Preview>
|
|
<span class="badge" data-variant="destructive">Destructive</span>
|
|
</Preview>
|
|
|
|
### Outline
|
|
|
|
<Preview>
|
|
<span class="badge" data-variant="outline">Outline</span>
|
|
</Preview>
|
|
|
|
### With icon
|
|
|
|
<Preview>
|
|
<span class="badge" data-variant="destructive">
|
|
<svg class="lucide lucide-circle-alert" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>
|
|
With icon
|
|
</span>
|
|
</Preview>
|
|
|
|
### Link
|
|
|
|
<Preview>
|
|
<a href="#" class="badge" data-variant="outline">
|
|
Link
|
|
<svg class="rtl:rotate-180 lucide lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
|
</a>
|
|
</Preview>
|
|
|
|
### Custom Colors
|
|
|
|
<Preview>
|
|
<span class="badge bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
|
|
Custom
|
|
</span>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
Flip directional icons explicitly.
|
|
|
|
<Preview>
|
|
<div dir="rtl" class="flex flex-wrap gap-2">
|
|
<span class="badge">نشط</span>
|
|
<a href="#" class="badge" data-variant="outline">
|
|
التفاصيل
|
|
<svg class="rtl:rotate-180 lucide lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
|
</a>
|
|
</div>
|
|
</Preview>
|