Badge

Eventually this custom CMS you're probably building is going to need tags.

documentationhelp wantedbug
import { Badge } from '@/components/badge'

function Example() {
  return (
    <div className="flex gap-3">
      <Badge color="lime">documentation</Badge>
      <Badge color="purple">help wanted</Badge>
      <Badge color="rose">bug</Badge>
    </div>
  )
}

Component API

PropDefaultDescription
Badge extends the JSX <span> element
colorzincThe color of the badge.
BadgeButton extends the Headless UI Button component or the Link component
colorzincThe color of the badge.
href-The target URL when using the button as a link.

Examples

Badge colors

Use the color prop to set the color of the badge:

documentationhelp wantedbug
import { Badge } from '@/components/badge'

function Example() {
  return (
    <div className="flex gap-3">
      <Badge color="lime">documentation</Badge>
      <Badge color="purple">help wanted</Badge>
      <Badge color="rose">bug</Badge>
    </div>
  )
}

For a full list of included color variants, check out the color reference.

Using as buttons

Use the BadgeButton component to render a badge as a button:

import { BadgeButton } from '@/components/badge'

function Example() {
  return <BadgeButton>documentation</BadgeButton>
}

Use the BadgeButton component with the href prop to render a badge as a link:

import { BadgeButton } from '@/components/badge'

function Example() {
  return <BadgeButton href="#">documentation</BadgeButton>
}

Appendix

Color reference

Catalyst includes 18 badge colors that automatically change between light and dark modes to maintain a consistent level of contrast:

ColorExample
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
zinc