Badge

A small pill for labels, counts, and statuses.

Solid Soft Quiet Destructive Link

Installation

npx lily-svelte@latest add badge

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the badge source from the registry into `$lib/components/ui/badge`.

Usage

<script lang="ts">
	import { Badge } from '$lib/components/ui/badge';
</script>
 
<Badge>New</Badge>

Variants

Badges are usually status labels, and status has weight — deleted and draft should not read the same. solid, soft and quiet step down in weight; destructive is a meaning, not a weight.

<Badge variant="solid">Live</Badge>
<Badge>Draft</Badge>
<Badge variant="quiet">Archived</Badge>
<Badge variant="destructive">Deleted</Badge>

soft is the default, so a badge you drop in without thinking stays out of the way.

Every level keeps a fill, including quiet. Unlike a Button, a badge has no hover state to fall back on, so a fill-less pill is just text with unexplained padding — in a table cell it stops reading as a status. That is also why quiet dims the label as well as the fill: moving both axes keeps the step legible when the fills are only three points apart.

Link

Pass an href to render the badge as an anchor. Only then does it pick up a hover treatment, so a static status label never looks clickable.

<Badge href="/changelog">v1.0</Badge>

badgeVariants

To style something that is not a Badge, use badgeVariants().

<script lang="ts">
	import { badgeVariants } from '$lib/components/ui/badge';
</script>
 
<span class={badgeVariants({ variant: 'quiet' })}>Archived</span>

Sizes and colors

size accepts xs, sm, md, and lg. color accepts blue, teal, green, red, yellow, and elephant. Aquamarine maps solid to the reference fill treatment and soft to weak, including separate foreground and background colors.

xssmmdlg

bluetealgreenredyellowelephant

← Avatar Breadcrumb →