ComponentsUpdated Sep 9, 2026

Badge

A small, static label for metadata: durations, counts, sources, status. Not interactive; wrap it in a button or use Select with size="badge" when it needs to do something.

Import

Source: packages/ui/src/components/badge

tsx

import { Badge } from '@highlight/ui'

Basic

Icons in the left slot are sized automatically. Tint with className when the badge carries status.

Default

Tomorrow, 9:00

#design

Brand tint

Done

Blocked

tsx

import { Calendar, Slack } from 'lucide-react'
import { Badge } from '@highlight/ui'

export default function BadgeBasic() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge>Default</Badge>
      <Badge left={<Calendar />}>Tomorrow, 9:00</Badge>
      <Badge left={<Slack />}>#design</Badge>
      <Badge className="bg-brand/15 border-brand/30 text-foreground">Brand tint</Badge>
      <Badge className="bg-success/10 border-success/20 text-success">Done</Badge>
      <Badge className="bg-danger/10 border-danger/20 text-danger">Blocked</Badge>
    </div>
  )
}

With image

An img child is rounded and sized like an icon.

Lin

Vaun

tsx

import { Badge } from '@highlight/ui'

export default function BadgeAvatar() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge>
        <img src="https://api.dicebear.com/9.x/initials/svg?seed=Lin" alt="" />
        Lin
      </Badge>
      <Badge>
        <img src="https://api.dicebear.com/9.x/initials/svg?seed=Vaun" alt="" />
        Vaun
      </Badge>
    </div>
  )
}

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`left / right`	ReactNode	—	Leading and trailing slots.
`className`	string	—	Merged over the defaults; use for tints.