Badges

Use Tailwind CSS badges as elements to show counts or labels separately or inside other components

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Alternatively, badges can also be used as standalone elements that link to a certain page.

Setup

Import a button component in the script tag.

<script>
	import { Badge } from 'flowbite-svelte';
</script>

Default badge

Use the following badge elements to indicate counts or labels inside or outside components.

<Badge>Default</Badge>
<Badge color="dark">Dark</Badge>
<Badge color="red">Red</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="indigo">Indigo</Badge>
<Badge color="purple">Purple</Badge>
<Badge color="pink">Pink</Badge>

Large badges

Use the large={true} to create a large variant of the badges.

<Badge large={true}>Default</Badge>
<Badge large={true} color="dark">Dark</Badge>
<Badge large={true} color="red">Red</Badge>
<Badge large={true} color="green">Green</Badge>
<Badge large={true} color="yellow">Yellow</Badge>
<Badge large={true} color="indigo">Indigo</Badge>
<Badge large={true} color="purple">Purple</Badge>
<Badge large={true} color="pink">Pink</Badge>

Badges as links

You can also use badges as anchor elements to link to another page.

<Badge href="/">Badge link</Badge>
<Badge href="/" large={true}>Badge link</Badge>

Badges with icon

You can also use SVG icons inside the badge elements.

<Badge color="dark"><Clock class="mr-1 w-3 h-3"/>3 days ago</Badge>
<Badge large={true}><Clock class="mr-1 w-4 h-4"/>2 minutes ago</Badge>

Notification badge

You can also use the badge elements as index. Remember to add the relative class to parent element.

<Button class="relative" size='sm'>
  <Mail class="w-7 h-7" />
  <span class="sr-only">Notifications</span>
  <Badge rounded index color="!red">20</Badge>
</Button>

<Button class="relative" size='sm'>
  <Mail class="w-7 h-7" />
  <span class="sr-only">Notifications</span>
  <Badge large rounded index color="!green">20</Badge>
</Button>

Button with badge

Use this example to add a badge inside a button component for a count indicator.

<Button>
  Messages<Badge rounded class="ml-2 w-5 h-5">2</Badge>
</Button>

Badge with icon only

Alternatively you can also use badges which indicate only a SVG icon.

<Badge rounded ><Check class="w-3 h-3"/></Badge>
<Badge rounded color="dark" ><Check class="w-3 h-3"/></Badge>
<Badge rounded large ><Check class="w-4 h-4"/></Badge>
<Badge rounded large color="dark" ><Check class="w-4 h-4"/></Badge>

Dismissable badges

Use the dimissable attribute to dismiss the current badge.

<Badge dismissable >Dismissable</Badge>
<Badge dismissable large color="red">Dismissable</Badge>

Props

The component has the following props, type, and default values. See types page for type information.

References