Badge

import { BuiBadge } from 'ng-blatui';

<span buiBadge>Badge</span>

<span buiBadge>Default</span>
<span buiBadge variant="secondary">Secondary</span>
<span buiBadge variant="destructive">Destructive</span>
<span buiBadge variant="outline">Outline</span>

<!-- tone="success | warning | danger | info | neutral", variant="soft | solid | outline" -->
<span buiBadge tone="success">Confirmed</span>
<span buiBadge tone="warning" variant="solid">Pending</span>
<span buiBadge tone="danger" variant="outline">Declined</span>

<span buiBadge size="sm">Small</span>
<span buiBadge>Default</span>
<span buiBadge size="lg">Large</span>

<span buiBadge variant="outline" class="gap-1.5">
  <span class="size-1.5 rounded-full bg-emerald-500"></span> Online
</span>

<span buiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</span>
<span buiBadge variant="destructive" class="h-5 min-w-5 rounded-full px-1 tabular-nums">99</span>

<span buiBadge><svg><!-- check --></svg> Verified</span>
<span buiBadge variant="destructive"><svg><!-- alert --></svg> Error</span>

<span buiBadge variant="secondary" class="gap-1 pr-1">
  {{ tag }}
  <button (click)="remove(tag)" aria-label="Remove"><svg><!-- x --></svg></button>
</span>

<span buiBadge variant="outline" class="h-auto gap-1.5 rounded-full py-1 pl-1">
  <bui-avatar class="size-4" src="/avatar.png" alt="shadcn" /> shadcn
</span>

<a buiBadge href="/docs">Docs</a>
<a buiBadge href="#" variant="secondary">v1.1.0</a>

<span buiBadge class="border-transparent bg-gradient-to-r from-indigo-500 to-pink-500 text-white">Pro</span>