8.0k New

Badge

Previous Next

Displays a badge or a component that looks like a badge.

Epicenter

Local-first, open source apps

Special Sponsor
Badge Secondary Destructive Outline
<script lang="ts">
	import { Badge } from "$lib/components/ui/badge/index.js";
</script>
 
<div class="flex w-full flex-wrap justify-center gap-2">
	<Badge>Badge</Badge>
	<Badge variant="secondary">Secondary</Badge>
	<Badge variant="destructive">Destructive</Badge>
	<Badge variant="outline">Outline</Badge>
</div>

Installation 

pnpm dlx shadcn-svelte@latest add badge

Usage 

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge/index.js";
</script>
<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Variants

Use the variant prop to change the variant of the badge.

Default Secondary Destructive Outline Ghost
<script lang="ts">
	import { Badge } from "$lib/components/ui/badge/index.js";
</script>
 
<div class="flex flex-wrap gap-2">
	<Badge>Default</Badge>
	<Badge variant="secondary">Secondary</Badge>
	<Badge variant="destructive">Destructive</Badge>
	<Badge variant="outline">Outline</Badge>
	<Badge variant="ghost">Ghost</Badge>
</div>

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

Verified Bookmark 
<script lang="ts">
	import BadgeCheckIcon from "@lucide/svelte/icons/badge-check";
	import BookmarkIcon from "@lucide/svelte/icons/bookmark";
	import { Badge } from "$lib/components/ui/badge/index.js";
</script>
 
<div class="flex flex-wrap gap-2">
	<Badge variant="secondary">
		<BadgeCheckIcon data-icon="inline-start" />
		Verified
	</Badge>
	<Badge variant="outline">
		Bookmark
		<BookmarkIcon data-icon="inline-end" />
	</Badge>
</div>

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

Deleting Generating 
<script lang="ts">
	import { Badge } from "$lib/components/ui/badge/index.js";
	import { Spinner } from "$lib/components/ui/spinner/index.js";
</script>
 
<div class="flex flex-wrap gap-2">
	<Badge variant="destructive">
		<Spinner data-icon="inline-start" />
		Deleting
	</Badge>
	<Badge variant="secondary">
		Generating
		<Spinner data-icon="inline-end" />
	</Badge>
</div>

Link

Use the href prop to render a link as a badge.

<script lang="ts">
	import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
	import { Badge } from "$lib/components/ui/badge/index.js";
</script>
 
<Badge href="#link">
	Open Link <ArrowUpRightIcon data-icon="inline-end" />
</Badge>

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

Blue Green Sky Purple Red
<script lang="ts">
	import { Badge } from "$lib/components/ui/badge/index.js";
</script>
 
<div class="flex flex-wrap gap-2">
	<Badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</Badge>
	<Badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</Badge>
	<Badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</Badge>
	<Badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">Purple</Badge>
	<Badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</Badge>
</div>