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.
Name | Type | Default |
---|---|---|
color | Colors | 'blue' |
large | boolean | false |
href | string | undefined |
rounded | boolean | false |
index | boolean | false |
dismissable | boolean | false |