Badge

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

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>
  )
}

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

Examples

Badge colors

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

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>
  )
}

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>
}

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

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

Using as links

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>
}

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: