Badge
Default badge
html
typescript
<span flowbiteBadge>
<span>default</span>
</span>
<span
flowbiteBadge
color="info">
<span>info</span>
</span>
<span
flowbiteBadge
color="failure">
<span>failure</span>
</span>
<span
flowbiteBadge
color="warning">
<span>warning</span>
</span>
<span
flowbiteBadge
color="success">
<span>success</span>
</span>
<span
flowbiteBadge
color="primary">
<span>primary</span>
</span>Bordered badge
html
typescript
<span
flowbiteBadge
border>
<span>default</span>
</span>
<span
flowbiteBadge
border
color="info">
<span>info</span>
</span>
<span
flowbiteBadge
border
color="failure">
<span>failure</span>
</span>
<span
flowbiteBadge
border
color="warning">
<span>warning</span>
</span>
<span
flowbiteBadge
border
color="success">
<span>success</span>
</span>
<span
flowbiteBadge
border
color="primary">
<span>primary</span>
</span>Badge as link
html
typescript
<a
href="#"
flowbiteBadgeLink>
<span>default</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="info">
<span>info</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="failure">
<span>failure</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="success">
<span>success</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="warning">
<span>warning</span>
</a>
<a
href="#"
flowbiteBadgeLink
color="primary">
<span>primary</span>
</a>Badge with icon
html
typescript
<span flowbiteBadge>
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">default</span>
</span>
<span
flowbiteBadge
color="info">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">info</span>
</span>
<span
flowbiteBadge
color="failure">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">failure</span>
</span>
<span
flowbiteBadge
color="success">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">success</span>
</span>
<span
flowbiteBadge
color="warning">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">warning</span>
</span>
<span
flowbiteBadge
color="primary">
<flowbite-icon
name="check"
class="size-4 stroke-2" />
<span class="ml-2">primary</span>
</span>Dismissable badge
html
typescript
<span flowbiteBadge>
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">default</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="info">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">info</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="failure">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">failure</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="warning">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">warning</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="success">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">success</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>
<span
flowbiteBadge
color="primary">
<flowbite-icon
name="infoCircle"
class="size-4 stroke-2" />
<span class="ml-2">primary</span>
<button flowbiteBadgeButton>
<flowbite-icon
name="close"
class="size-4 stroke-2"
(click)="onDismiss()" />
</button>
</span>