mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
44 lines
1.5 KiB
Plaintext
44 lines
1.5 KiB
Plaintext
<section id="badge" class="w-full rounded-lg border scroll-mt-16">
|
|
<header class="border-b px-4 py-3">
|
|
<h2 class="text-sm font-medium">Badge</h2>
|
|
</header>
|
|
<div class="p-4">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex flex-wrap items-center gap-2 md:flex-row">
|
|
<span class="badge">Primary</span>
|
|
<span class="badge-secondary">Secondary</span>
|
|
<span class="badge-outline">Outline</span>
|
|
<span class="badge-destructive">Destructive</span>
|
|
<span class="badge-outline">
|
|
{% lucide "check" %}
|
|
Badge
|
|
</span>
|
|
<span class="badge-destructive">
|
|
{% lucide "circle-alert" %}
|
|
Alert
|
|
</span>
|
|
<span class="badge rounded-full min-w-5 px-1">8</span>
|
|
<span class="badge-destructive rounded-full min-w-5 px-1">99</span>
|
|
<span class="badge-outline rounded-full min-w-5 px-1 font-mono tabular-nums">20+</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 md:flex-row">
|
|
<a href="#" class="badge">
|
|
Link
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a href="#" class="badge-secondary">
|
|
Link
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a href="#" class="badge-destructive">
|
|
Link
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a href="#" class="badge-outline">
|
|
Link
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |