Badge

A small label component for displaying status or categories

Basic Variants

Available style variants for the badge component

Default Secondary Flat Outline Dashed

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap gap-4">
7	<Badge text="Default" />
8	<Badge text="Secondary" variant="secondary" />
9	<Badge text="Flat" variant="flat" />
10	<Badge text="Outline" variant="outline" />
11	<Badge text="Dashed" variant="dashed" />
12</div>

Color Variants

Use colors to convey semantic meaning

Red Orange Yellow Green Blue Purple Pink Gray

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap gap-4">
7	<Badge text="Red" color="red" />
8	<Badge text="Orange" color="orange" />
9	<Badge text="Yellow" color="yellow" />
10	<Badge text="Green" color="green" />
11	<Badge text="Blue" color="blue" />
12	<Badge text="Purple" color="purple" />
13	<Badge text="Pink" color="pink" />
14	<Badge text="Gray" color="gray" />
15</div>

Variant + Color Combinations

All variants can be combined with any color using compoundVariants

Default Variant

Default Red Orange Green Blue Purple

Secondary Variant

Default Red Orange Green Blue Purple

Flat Variant

Default Red Orange Green Blue Purple

Outline Variant

Default Red Orange Green Blue Purple

Dashed Variant

Default Red Orange Green Blue Purple

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7	<!-- Default Variant -->
8	<div class="flex flex-wrap gap-2">
9		<Badge text="Default" variant="default" />
10		<Badge text="Red" variant="default" color="red" />
11		<Badge text="Green" variant="default" color="green" />
12		<Badge text="Blue" variant="default" color="blue" />
13	</div>
14
15	<!-- Secondary Variant -->
16	<div class="flex flex-wrap gap-2">
17		<Badge text="Default" variant="secondary" />
18		<Badge text="Red" variant="secondary" color="red" />
19		<Badge text="Green" variant="secondary" color="green" />
20		<Badge text="Blue" variant="secondary" color="blue" />
21	</div>
22
23	<!-- Flat Variant -->
24	<div class="flex flex-wrap gap-2">
25		<Badge text="Default" variant="flat" />
26		<Badge text="Red" variant="flat" color="red" />
27		<Badge text="Green" variant="flat" color="green" />
28		<Badge text="Blue" variant="flat" color="blue" />
29	</div>
30
31	<!-- Outline Variant -->
32	<div class="flex flex-wrap gap-2">
33		<Badge text="Default" variant="outline" />
34		<Badge text="Red" variant="outline" color="red" />
35		<Badge text="Green" variant="outline" color="green" />
36		<Badge text="Blue" variant="outline" color="blue" />
37	</div>
38
39	<!-- Dashed Variant -->
40	<div class="flex flex-wrap gap-2">
41		<Badge text="Default" variant="dashed" />
42		<Badge text="Red" variant="dashed" color="red" />
43		<Badge text="Green" variant="dashed" color="green" />
44		<Badge text="Blue" variant="dashed" color="blue" />
45	</div>
46</div>

Sizes

Three size options: small, default, and large

Small Default Large

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="flex items-center gap-4">
7	<Badge text="Small" size="sm" />
8	<Badge text="Default" size="default" />
9	<Badge text="Large" size="lg" />
10</div>

Shapes

Three shape options: rounded (default), circle (pill), and square

Rounded (Default)

Default Secondary Flat Outline Dashed

Circle (Pill)

Default Secondary Flat Outline Dashed

Square

Default Secondary Flat Outline Dashed

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7	<div>
8		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Rounded (Default)</h3>
9		<div class="flex flex-wrap gap-2">
10			<Badge text="Default" shape="rounded" />
11			<Badge text="Secondary" variant="secondary" shape="rounded" />
12			<Badge text="Flat" variant="flat" color="blue" shape="rounded" />
13			<Badge text="Outline" variant="outline" color="green" shape="rounded" />
14			<Badge text="Dashed" variant="dashed" color="purple" shape="rounded" />
15		</div>
16	</div>
17
18	<div>
19		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Circle (Pill)</h3>
20		<div class="flex flex-wrap gap-2">
21			<Badge text="Default" shape="circle" />
22			<Badge text="Secondary" variant="secondary" shape="circle" />
23			<Badge text="Flat" variant="flat" color="blue" shape="circle" />
24			<Badge text="Outline" variant="outline" color="green" shape="circle" />
25			<Badge text="Dashed" variant="dashed" color="purple" shape="circle" />
26		</div>
27	</div>
28
29	<div>
30		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Square</h3>
31		<div class="flex flex-wrap gap-2">
32			<Badge text="Default" shape="square" />
33			<Badge text="Secondary" variant="secondary" shape="square" />
34			<Badge text="Flat" variant="flat" color="blue" shape="square" />
35			<Badge text="Outline" variant="outline" color="green" shape="square" />
36			<Badge text="Dashed" variant="dashed" color="purple" shape="square" />
37		</div>
38	</div>
39</div>

Shape + Color Combinations

All shapes can be combined with any color

Rounded + Colors

Red Blue Green Purple Orange

Circle + Colors

Red Blue Green Purple Orange

Square + Colors

Red Blue Green Purple Orange

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="space-y-4">
7	<div>
8		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Rounded + Colors</h3>
9		<div class="flex flex-wrap gap-2">
10			<Badge text="Red" color="red" shape="rounded" />
11			<Badge text="Blue" color="blue" shape="rounded" />
12			<Badge text="Green" color="green" shape="rounded" />
13			<Badge text="Purple" color="purple" shape="rounded" />
14			<Badge text="Orange" color="orange" shape="rounded" />
15		</div>
16	</div>
17
18	<div>
19		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Circle + Colors</h3>
20		<div class="flex flex-wrap gap-2">
21			<Badge text="Red" color="red" shape="circle" />
22			<Badge text="Blue" color="blue" shape="circle" />
23			<Badge text="Green" color="green" shape="circle" />
24			<Badge text="Purple" color="purple" shape="circle" />
25			<Badge text="Orange" color="orange" shape="circle" />
26		</div>
27	</div>
28
29	<div>
30		<h3 class="text-sm font-medium mb-2 text-muted-foreground">Square + Colors</h3>
31		<div class="flex flex-wrap gap-2">
32			<Badge text="Red" color="red" shape="square" />
33			<Badge text="Blue" color="blue" shape="square" />
34			<Badge text="Green" color="green" shape="square" />
35			<Badge text="Purple" color="purple" shape="square" />
36			<Badge text="Orange" color="orange" shape="square" />
37		</div>
38	</div>
39</div>

With Icons

Badges can include custom icons

Success Featured Fast Favorite Cart Alert

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4	import { Check, Star, Zap, Heart } from "@kareyes/aether/icons";
5</script>
6
7<div class="flex flex-wrap gap-4">
8	<Badge text="Success">
9		{#snippet icon()}
10			<Check class="size-3" />
11		{/snippet}
12	</Badge>
13	<Badge text="Featured" variant="secondary" color="yellow">
14		{#snippet icon()}
15			<Star class="size-3" />
16		{/snippet}
17	</Badge>
18	<Badge text="Fast" variant="flat" color="purple">
19		{#snippet icon()}
20			<Zap class="size-3" />
21		{/snippet}
22	</Badge>
23	<Badge text="Favorite" variant="outline" color="pink">
24		{#snippet icon()}
25			<Heart class="size-3" />
26		{/snippet}
27	</Badge>
28</div>

Loading State

Badges can show a loading spinner

Loading Processing Saving Updating Syncing

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="flex flex-wrap gap-4">
7	<Badge text="Loading" loading={true} />
8	<Badge text="Processing" variant="secondary" loading={true} />
9	<Badge text="Saving" variant="flat" color="blue" loading={true} />
10	<Badge text="Updating" variant="outline" color="green" loading={true} />
11	<Badge text="Syncing" variant="dashed" color="purple" loading={true} />
12</div>

Clickable Badges

Hover effects adapt to variant+color combinations

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4
5	function handleBadgeClick(text: string) {
6		alert(`Clicked: ${text}`);
7	}
8</script>
9
10<div class="space-y-3">
11	<div class="flex flex-wrap gap-2">
12		<Badge
13			text="Click me"
14			clickable={true}
15			onclick={() => handleBadgeClick("Default clickable")}
16		/>
17		<Badge
18			text="Secondary"
19			variant="secondary"
20			clickable={true}
21			onclick={() => handleBadgeClick("Secondary")}
22		/>
23		<Badge
24			text="Flat"
25			variant="flat"
26			clickable={true}
27			onclick={() => handleBadgeClick("Flat")}
28		/>
29	</div>
30	<div class="flex flex-wrap gap-2">
31		<Badge
32			text="Link Badge"
33			color="blue"
34			variant="outline"
35			href="https://example.com"
36			target="_blank"
37		/>
38	</div>
39</div>

Dismissable Badges

Tags that can be removed by clicking the dismiss button

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4
5	type TagType = {
6		id: number;
7		text: string;
8		variant: "default" | "secondary" | "flat" | "outline" | "dashed";
9		color: "blue" | "green" | "purple" | "orange";
10	};
11
12	let tags: TagType[] = $state([
13		{ id: 1, text: "Design", variant: "flat", color: "blue" },
14		{ id: 2, text: "Development", variant: "secondary", color: "green" },
15		{ id: 3, text: "Marketing", variant: "outline", color: "purple" },
16	]);
17
18	function removeTag(id: number) {
19		tags = tags.filter(tag => tag.id !== id);
20	}
21</script>
22
23<div class="flex flex-wrap gap-2">
24	{#each tags as tag (tag.id)}
25		<Badge
26			text={tag.text}
27			variant={tag.variant}
28			color={tag.color}
29			dismissable={true}
30			onDismiss={() => removeTag(tag.id)}
31		/>
32	{/each}
33</div>

Notification Badges

Dismissable notifications with colored badges

You have a new notification

You have a new notification

You have a new notification

You have a new notification

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4
5	let notifications = $state([
6		{ id: 1, text: "New message", color: "blue" as const },
7		{ id: 2, text: "Warning", color: "yellow" as const },
8		{ id: 3, text: "Error occurred", color: "red" as const },
9	]);
10
11	function removeNotification(id: number) {
12		notifications = notifications.filter(notif => notif.id !== id);
13	}
14</script>
15
16<div class="space-y-2">
17	{#each notifications as notification (notification.id)}
18		<div class="flex items-center justify-between p-3 border rounded-lg">
19			<span class="text-sm">You have a new notification</span>
20			<Badge
21				text={notification.text}
22				color={notification.color}
23				dismissable={true}
24				onDismiss={() => removeNotification(notification.id)}
25			/>
26		</div>
27	{/each}
28</div>

Status Indicators

Use colors to indicate different status states

Server Status Online

Database Maintenance

API Service Down

CDN Operational

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4	import { Check, AlertCircle } from "@kareyes/aether/icons";
5</script>
6
7<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
8	<div class="p-4 border rounded-lg">
9		<div class="flex items-center justify-between">
10			<span class="font-medium">Server Status</span>
11			<Badge text="Online" color="green">
12				{#snippet icon()}
13					<Check class="size-3" />
14				{/snippet}
15			</Badge>
16		</div>
17	</div>
18
19	<div class="p-4 border rounded-lg">
20		<div class="flex items-center justify-between">
21			<span class="font-medium">Database</span>
22			<Badge text="Maintenance" color="yellow">
23				{#snippet icon()}
24					<AlertCircle class="size-3" />
25				{/snippet}
26			</Badge>
27		</div>
28	</div>
29
30	<div class="p-4 border rounded-lg">
31		<div class="flex items-center justify-between">
32			<span class="font-medium">API Service</span>
33			<Badge text="Down" color="red">
34				{#snippet icon()}
35					<AlertCircle class="size-3" />
36				{/snippet}
37			</Badge>
38		</div>
39	</div>
40</div>

User Profile Example

Combining badges with avatars for user profiles

JD

John Doe

Senior Developer

React TypeScript Node.js Team Lead 5+ years

Active

Code Svelte

1
2<script lang="ts">
3	import { Avatar, Badge } from "@kareyes/aether";
4</script>
5
6<div class="bg-card p-6 rounded-lg border">
7	<div class="flex items-start space-x-4">
8		<Avatar fallback="John Doe" size="xl" variant="bordered"/>
9		<div class="flex-1">
10			<h3 class="text-lg font-semibold">John Doe</h3>
11			<p class="text-muted-foreground">Senior Developer</p>
12			<div class="flex flex-wrap gap-2 mt-3">
13				<Badge text="React" variant="flat" color="blue" size="sm" />
14				<Badge text="TypeScript" variant="flat" color="blue" size="sm" />
15				<Badge text="Node.js" variant="flat" color="green" size="sm" />
16				<Badge text="Team Lead" variant="secondary" color="purple" size="sm" />
17			</div>
18		</div>
19		<Badge text="Active" color="green" />
20	</div>
21</div>

Product Cards

Using badges for pricing and feature highlights

Premium Plan

Popular

Advanced features for growing teams

$29/mo

Basic Plan

Free

Essential features for individuals

$0/mo Limited

Enterprise

Contact Sales

Custom solutions for large organizations

Custom

Code Svelte

1
2<script lang="ts">
3	import { Badge } from "@kareyes/aether";
4</script>
5
6<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
7	<div class="border rounded-lg p-4">
8		<div class="flex justify-between items-start mb-3">
9			<h3 class="font-semibold">Premium Plan</h3>
10			<Badge text="Popular" color="green" />
11		</div>
12		<p class="text-muted-foreground text-sm mb-4">Advanced features for growing teams</p>
13		<div class="flex justify-between items-center">
14			<span class="text-2xl font-bold">$29/mo</span>
15			<Badge text="Best Value" color="green" clickable={true} />
16		</div>
17	</div>
18
19	<div class="border rounded-lg p-4">
20		<div class="flex justify-between items-start mb-3">
21			<h3 class="font-semibold">Basic Plan</h3>
22			<Badge text="Free" color="gray" />
23		</div>
24		<p class="text-muted-foreground text-sm mb-4">Essential features for individuals</p>
25		<div class="flex justify-between items-center">
26			<span class="text-2xl font-bold">$0/mo</span>
27			<Badge text="Limited" variant="outline" />
28		</div>
29	</div>
30
31	<div class="border rounded-lg p-4">
32		<div class="flex justify-between items-start mb-3">
33			<h3 class="font-semibold">Enterprise</h3>
34			<Badge text="Contact Sales" variant="secondary" />
35		</div>
36		<p class="text-muted-foreground text-sm mb-4">Custom solutions for large organizations</p>
37		<div class="flex justify-between items-center">
38			<span class="text-2xl font-bold">Custom</span>
39			<Badge text="Custom" color="purple" clickable={true} />
40		</div>
41	</div>
42</div>

Basic Usage

<script lang="ts">
  import { Badge } from "@kareyes/aether";
</script>

<Badge text="Default Badge" />

With Primitives Import

<script lang="ts">
  import { BadgePrimitives } from "@kareyes/aether";
</script>

<BadgePrimitives.Root variant="success">Success</BadgePrimitives.Root>

With Variants

<Badge text="Success" variant="success" />
<Badge text="Warning" variant="warning" />
<Badge text="Error" variant="destructive" />
<Badge text="Info" variant="info" />

With Colors

<Badge text="Red" color="red" />
<Badge text="Blue" color="blue" />
<Badge text="Green" color="green" />
<Badge text="Purple" color="purple" />

Props Reference

Prop	Type	Default	Description
`text`	`string`	`undefined`	Text content of the badge
`variant`	`BadgeVariant`	`"default"`	Visual style variant
`color`	`BadgeColor`	`"default"`	Color theme
`size`	`BadgeSize`	`"default"`	Size of the badge
`icon`	`Snippet`	`undefined`	Custom icon snippet
`loading`	`boolean`	`false`	Show loading spinner
`dismissable`	`boolean`	`false`	Show dismiss button
`clickable`	`boolean`	`false`	Make badge clickable
`href`	`string`	`undefined`	URL for link badges
`onclick`	`() => void`	`undefined`	Click handler
`onDismiss`	`() => void`	`undefined`	Dismiss handler
`class`	`string`	-	Additional CSS classes

Badge Variants

Variant	Description
`default`	Primary badge with solid background
`secondary`	Secondary badge with muted background
`destructive`	Red badge for errors and dangerous actions
`outline`	Badge with border, transparent background
`ghost`	Minimal badge with no background
`success`	Green badge for positive states
`warning`	Yellow badge for caution states
`info`	Blue badge for informational content

Badge Colors

Color	Use Case
`red`	Errors, urgent
`orange`	Warnings, attention
`yellow`	Caution, pending
`green`	Success, positive
`blue`	Information, links
`purple`	Features, premium
`pink`	Creative, design
`gray`	Neutral, disabled

Badge Sizes

Size	Description
`sm`	Compact, for lists and tables
`default`	Standard size
`lg`	Prominent display

Variants

All Variants

<Badge text="Default" variant="default" />
<Badge text="Secondary" variant="secondary" />
<Badge text="Destructive" variant="destructive" />
<Badge text="Outline" variant="outline" />
<Badge text="Ghost" variant="ghost" />
<Badge text="Success" variant="success" />
<Badge text="Warning" variant="warning" />
<Badge text="Info" variant="info" />

Examples

With Icons

<script lang="ts">
  import { Badge } from "@kareyes/aether";
  import CheckIcon from "@lucide/svelte/icons/check";
  import StarIcon from "@lucide/svelte/icons/star";
</script>

<Badge text="Success">
  {#snippet icon()}
    <CheckIcon class="size-3" />
  {/snippet}
</Badge>

<Badge text="Featured" color="yellow">
  {#snippet icon()}
    <StarIcon class="size-3" />
  {/snippet}
</Badge>

Loading State

<script lang="ts">
  import { Badge } from "@kareyes/aether";

  let isProcessing = $state(true);
</script>

<Badge text="Loading" loading={true} />
<Badge text="Processing" variant="secondary" loading={true} />

<!-- Conditional loading -->
<Badge
  text={isProcessing ? "Processing..." : "Done"}
  loading={isProcessing}
  color={isProcessing ? "blue" : "green"}
/>

Clickable Badges

<script lang="ts">
  import { Badge } from "@kareyes/aether";

  function handleClick() {
    alert('Badge clicked!');
  }
</script>

<Badge
  text="Click me"
  clickable={true}
  onclick={handleClick}
/>

Dismissable Badges

<script lang="ts">
  import { Badge } from "@kareyes/aether";

  let tags = $state(['Design', 'Development', 'Marketing']);

  function removeTag(index: number) {
    tags = tags.filter((_, i) => i !== index);
  }
</script>

{#each tags as tag, index (tag)}
  <Badge
    text={tag}
    color="blue"
    dismissable={true}
    onDismiss={() => removeTag(index)}
  />
{/each}

Link Badges

<Badge
  text="Visit Site"
  href="https://example.com"
  color="blue"
  target="_blank"
/>

Status Indicators

<script lang="ts">
  import { Badge } from "@kareyes/aether";
  import CheckIcon from "@lucide/svelte/icons/check";
  import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
</script>

<div class="flex gap-4">
  <div class="flex items-center gap-2">
    <span>Server:</span>
    <Badge text="Online" variant="success" size="sm">
      {#snippet icon()}
        <CheckIcon class="size-3" />
      {/snippet}
    </Badge>
  </div>

  <div class="flex items-center gap-2">
    <span>Database:</span>
    <Badge text="Maintenance" variant="warning" size="sm">
      {#snippet icon()}
        <AlertCircleIcon class="size-3" />
      {/snippet}
    </Badge>
  </div>
</div>

Tag System

<script lang="ts">
  import { Badge } from "@kareyes/aether";

  let availableTags = ['React', 'Vue', 'Svelte', 'Angular'];
  let selectedTags = $state(['React', 'Svelte']);

  function addTag(tag: string) {
    if (!selectedTags.includes(tag)) {
      selectedTags = [...selectedTags, tag];
    }
  }

  function removeTag(tag: string) {
    selectedTags = selectedTags.filter(t => t !== tag);
  }
</script>

<!-- Selected tags -->
<div class="flex flex-wrap gap-2 mb-4">
  {#each selectedTags as tag}
    <Badge
      text={tag}
      color="blue"
      dismissable={true}
      onDismiss={() => removeTag(tag)}
    />
  {/each}
</div>

<!-- Available tags -->
<div class="flex flex-wrap gap-2">
  {#each availableTags as tag}
    {#if !selectedTags.includes(tag)}
      <Badge
        text={tag}
        variant="outline"
        clickable={true}
        onclick={() => addTag(tag)}
      />
    {/if}
  {/each}
</div>

Product Features

<script lang="ts">
  import { Badge } from "@kareyes/aether";
</script>

<div class="border rounded-lg p-4">
  <div class="flex justify-between items-start mb-2">
    <h3 class="font-semibold">Premium Plan</h3>
    <Badge text="Popular" variant="success" />
  </div>
  <p class="text-sm text-muted-foreground mb-4">
    Advanced features for teams
  </p>
  <div class="flex gap-2">
    <Badge text="Analytics" color="blue" size="sm" />
    <Badge text="API Access" color="green" size="sm" />
    <Badge text="Priority Support" color="purple" size="sm" />
  </div>
</div>

User Profile

<script lang="ts">
  import { Badge } from "@kareyes/aether";
</script>

<div class="flex items-start gap-4">
  <div class="w-12 h-12 bg-gray-200 rounded-full"></div>
  <div class="flex-1">
    <div class="flex items-center gap-2 mb-1">
      <h3 class="font-semibold">John Doe</h3>
      <Badge text="Pro" variant="success" size="sm" />
    </div>
    <p class="text-sm text-muted-foreground mb-2">Senior Developer</p>
    <div class="flex flex-wrap gap-1">
      <Badge text="React" color="blue" size="sm" />
      <Badge text="TypeScript" color="blue" size="sm" />
      <Badge text="Node.js" color="green" size="sm" />
    </div>
  </div>
</div>

Accessibility

The Badge component follows accessibility best practices:

Semantic HTML

Proper semantic HTML (<span>, <a>, or <button>)
ARIA labels for dismiss buttons
Keyboard navigation support

Best Practices

Use meaningful text: Badge text should clearly indicate the status or category
Color contrast: All colors include proper contrast for readability
Interactive feedback: Clickable and dismissable badges have visual feedback
Screen reader friendly: All variants support screen readers
Dark mode: All colors and variants include dark mode support