Svelte Badge - Flowbite

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 badge component in the script tag.

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

Default badge #

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

Default 
Dark 
Red 
Green 
Yellow 
Indigo 
Purple 
Pink 
Svelte
<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 prop to create a large variant of the badges.

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

Bordered badge #

Use the border prop to add a border accent to the badge component.

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

Pills badge #

Use the rounded prop to make the corners even more rounded like pills for the badge component.

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

Badges as links #

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

Badge link 
Badge link 
Badge link 
Badge link 
Svelte
<Badge href="/">Badge link</Badge>
<Badge href="/" large>Badge link</Badge>
<Badge href="/" border>Badge link</Badge>
<Badge href="/" rounded>Badge link</Badge>

Badges with icon #

You can also use SVG icons inside the badge elements.

 
3 days ago 
 
2 minutes ago 
Svelte
<script>
  import { Badge } from 'flowbite-svelte';
  import { ClockSolid } from 'flowbite-svelte-icons';
</script>

<Badge color="dark" border>
  <ClockSolid class="w-2.5 h-2.5 me-1.5" />
  3 days ago
</Badge>
<Badge border>
  <ClockSolid class="text-primary-800 dark:text-primary-400 w-2.5 h-2.5 me-1.5" />
  2 minutes ago
</Badge>

Notification badge #

To achive the functionality of the notification badge, use the sibling Indicator component. Remember to add the relative class to parent element.

     
Svelte
<script>
  import { Button, Indicator } from 'flowbite-svelte';
  import { EnvelopeSolid } from 'flowbite-svelte-icons';
</script>

<Button class="relative" size="sm">
  <EnvelopeSolid class="text-white dark:text-white" />
  <span class="sr-only">Notifications</span>
  <Indicator color="blue" border size="xl" placement="top-right" class="text-xs font-bold">18</Indicator>
</Button>

<Button class="relative" size="sm">
  <EnvelopeSolid class="text-white dark:text-white" />
  <span class="sr-only">Notifications</span>
  <Indicator color="red" border size="xl" placement="top-right" class="text-xs font-bold">20</Indicator>
</Button>

<Button class="relative" size="sm">
  <EnvelopeSolid class="text-white dark:text-white" />
  <span class="sr-only">Notifications</span>
  <Indicator color="dark" border size="xl" placement="bottom-right" class="text-xs font-bold">20</Indicator>
</Button>

Button with badge #

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

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

<Button>
  Messages
  <Badge rounded class="w-4 h-4 ms-2 p-0 font-semibold text-primary-800 bg-white dark:text-primary-800 dark:bg-white">2</Badge>
</Button>

Badge with icon only #

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

  Icon description 
  Icon description 
Svelte
<Badge color="dark" rounded large class="!p-1 !font-semibold">
  <CheckOutline class="h-3 w-3" />
  <span class="sr-only">Icon description</span>
</Badge>
<Badge rounded large class="!p-1 !font-semibold">
  <CheckOutline class="h-3 w-3 text-primary-800 dark:text-primary-400" />
  <span class="sr-only">Icon description</span>
</Badge>

Dismissable badges #

Use the dimissable prop to dismiss the current badge.

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

Use the close-button slot to add your desired button. Don’t forget to use the slot prop close to dismiss your badge.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 gap-4"><div class="font-medium inline-flex items-center justify-center px-2.5 py-0.5 text-xs bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300 rounded">Default <button slot="close-button" type="button" class="inline-flex items-center rounded-full p-0.5 my-0.5 ms-1.5 -me-1.5 text-sm bg-primary-500 dark:bg-primary-400 text-white dark:text-primary-800 hover:bg-primary-900 hover:text-white dark:hover:bg-red-900 dark:hover:text-yellow-300" aria-label="Remove"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 h-4 w-4" role="img" aria-label="close circle solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"></path></svg>  <span class="sr-only" data-svelte-h="svelte-1qdufic">Remove badge</span></button></div> </div>
Svelte
<script>
  import { Badge } from 'flowbite-svelte';
  import { CloseCircleSolid } from 'flowbite-svelte-icons';
</script>

<Badge dismissable>
  Default
  <button slot="close-button" let:close on:click={close} type="button" class="inline-flex items-center rounded-full p-0.5 my-0.5 ms-1.5 -me-1.5 text-sm bg-primary-500 dark:bg-primary-400 text-white dark:text-primary-800 hover:bg-primary-900 hover:text-white dark:hover:bg-red-900 dark:hover:text-yellow-300" aria-label="Remove">
    <CloseCircleSolid class="h-4 w-4" />
    <span class="sr-only">Remove badge</span>
  </button>
</Badge>

A close event will be dispatched during the dismissal, listen to it if needed.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 gap-4"><div class="font-medium inline-flex items-center justify-center px-2.5 py-0.5 text-sm bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300 rounded">Default  <button type="button" divclass="ms-1.5 -me-1.5" class="focus:outline-none whitespace-normal m-0.5 rounded focus:ring-1 p-0.5 text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300 ms-auto" aria-label="Remove badge"><span class="sr-only">Close</span> <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>
Svelte
<script>
  import { Badge } from 'flowbite-svelte';

  function handleClose(event) {
    alert('Badge dismissed');
  }
</script>

<Badge dismissable large on:close={handleClose}>Default</Badge>

Dynamic color #

The color can be changed dynamically.

Blinking badge 
Svelte
<script>
  import { Badge } from 'flowbite-svelte';

  setInterval(handleHover, 500);

  let color = 'primary';
  function handleHover() {
    color = color === 'primary' ? 'dark' : 'primary';
  }
</script>

<Badge large {color}>Blinking badge</Badge>

Component data #

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

Badge styling #

Use the class prop to overwrite the default class.

References #

Flowbite Badge

Badge component on GitHub

Avatar

Banner