Badge

Demos

A badge with the default style.

New results

Usage

Use a badge to tag something with a short status, such as "In range" or "New". Keep it to one or two words.

Import it from @workspace/ui/components/badge.

Notes

A badge is a span by default. Pass render to make it a link.
Mark an icon with data-icon="inline-start" or data-icon="inline-end" so the padding adjusts.
Do not rely on colour alone for status. Put the status in the text, too.

Examples

Variants

default, secondary, outline, destructive, ghost, and link.

DefaultSecondaryOutlineDestructiveGhostLink

"use client"

import { Badge } from "@workspace/ui/components/badge"

export function BadgeVariants() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="link">Link</Badge>
    </div>
  )
}

With icon

Icons before or after the text.

In rangeHighLow

"use client"

import { ArrowDownIcon, ArrowUpIcon, CircleCheckIcon } from "lucide-react"

import { Badge } from "@workspace/ui/components/badge"

export function BadgeWithIcon() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="outline">
        <CircleCheckIcon data-icon="inline-start" className="text-status-normal" />
        In range
      </Badge>
      <Badge variant="destructive">
        <ArrowUpIcon data-icon="inline-start" />
        High
      </Badge>
      <Badge variant="secondary">
        Low
        <ArrowDownIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}

As link

Pass an a through render. Linked badges get a hover style.

View report

"use client"

import { ArrowRightIcon } from "lucide-react"

import { Badge } from "@workspace/ui/components/badge"

export function BadgeAsLink() {
  return (
    <Badge render={<a href="#" />} variant="outline">
      View report
      <ArrowRightIcon data-icon="inline-end" />
    </Badge>
  )
}

Props

Unlisted props pass through to the rendered element.

Badge

Prop	Type	Default	Description
`variant`	`"default", "secondary", "outline", "destructive", "ghost", or "link"`	`default`	Visual style.
`render`	`ReactElement`	—	Element to render instead of a `span`, such as `<a href="..." />`.
`className`	`string`	—	Classes merged onto the badge.

badgeVariants is also exported, for giving another element the badge style.