Badges

<script>
  import { Badge } from 'flowbite-svelte'
  import { Clock, Check } from 'svelte-heros'
</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>

Larger 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="/">Default</Badge>
<Badge href="/" large={true}>Default</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>

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>

Props

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

References