Menu

Get Started

Components

Blocks

Badge

Compact labels for status, tags, and metadata.

Add a compact label to statuses, filters, and small pieces of metadata. Use text alone or pair it with an icon or spinner.

StableBetaBrokenDraft
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge>Stable</Badge>      <Badge variant="secondary">Beta</Badge>      <Badge variant="destructive">Broken</Badge>      <Badge variant="outline">Draft</Badge>    </>  )}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add badge

Usage

import { Badge } from "@/components/ui/badge"
<Badge>Stable</Badge>
<Badge variant="default | secondary | destructive | outline | ghost">  Stable</Badge>

Variants

Choose a variant to set the emphasis. Default is solid, secondary uses a softer surface, destructive marks problems, and outline or ghost stays quiet.

StableBetaBrokenDraftHint
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge>Stable</Badge>      <Badge variant="secondary">Beta</Badge>      <Badge variant="destructive">Broken</Badge>      <Badge variant="outline">Draft</Badge>      <Badge variant="ghost">Hint</Badge>    </>  )}

With icon

Place an SVG inside the badge. Add data-icon="inline-start" or data-icon="inline-end" to adjust the spacing on that side.

SyncedSaved
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge variant="secondary">        <CheckBadgeIcon data-icon="inline-start" />        Synced      </Badge>      <Badge variant="outline">        Saved        <BookmarkIcon data-icon="inline-end" />      </Badge>    </>  )}

With spinner

Use the same icon slot for a spinner while work is in progress. Keep data-icon so the spacing stays balanced.

RemovingBuilding
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge variant="destructive">        <SpinnerIcon data-icon="inline-start" />        Removing      </Badge>      <Badge variant="secondary">        Building        <SpinnerIcon data-icon="inline-end" />      </Badge>    </>  )}

Link

Wrap the badge in an anchor when it should navigate. The badge provides the visual treatment; the link remains the interactive element.

Link section
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <a href="#link" className="inline-flex">      <Badge>        Link section        <ArrowUpRightIcon data-icon="inline-end" />      </Badge>    </a>  )}

Custom colors

Use utility classes to give a specific status its own fill and text color.

DocsLivePreviewInternalBlocked
tsx
import { Badge } from "@/components/ui/badge"export function Example() {  return (    <>      <Badge className="border-transparent bg-blue-600 text-white">        Docs      </Badge>      <Badge className="border-transparent bg-success text-success-foreground">        Live      </Badge>      <Badge className="border-transparent bg-sky-600 text-white">        Preview      </Badge>      <Badge className="border-transparent bg-violet-600 text-white">        Internal      </Badge>      <Badge className="border-transparent bg-destructive text-destructive-foreground">        Blocked      </Badge>    </>  )}

API Reference

Badge

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline" | "ghost""default"
classNamestring—
<Badge variant="secondary">New</Badge>