Badge

Badges are useful for showing metadata or status information. They can be used to show a count, indicate a status change, or mark an item that requires attention.

bug

import { Badge } from 'cwl-ui'
 
export function Default() {
  return (
    <div className="flex space-x-2">
      <Badge>bug</Badge>
    </div>
  )
}

Component API

Prop	Default	Description
Color	`zinc`	The color of the badge.

See React Aria Badge for more details.

Examples

Badge Colors

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

InfobugDocumentationHelp wantedIn Progress

import { Badge } from 'cwl-ui'
 
const colors = [
  { color: 'gray', text: 'Info' },
  { color: 'red', text: 'bug' },
  { color: 'green', text: 'Documentation' },
  { color: 'purple', text: 'Help wanted' },
  { color: 'orange', text: 'In Progress' },
] as const
 
export function Colors() {
  return (
    <div className="flex space-x-2 flex-wrap">
      {colors.map(({ color, text }) => (
        <Badge key={color} color={color}>
          {text}
        </Badge>
      ))}
    </div>
  )
}

For a full list of colors refer to the Color Reference section.

Installation

To install, copy the code below and paste into your project.

import { cx } from './lib/cva.config'
 
export const colors = {
  red: 'bg-red-500/15 text-red-700',
  blue: 'bg-blue-500/15 text-blue-700',
  gray: 'bg-gray-500/15 text-gray-700',
  green: 'bg-green-500/15 text-green-700',
  orange: 'bg-orange-500/15 text-orange-700',
  pink: 'bg-pink-400/15 text-pink-700',
  purple: 'bg-purple-500/15 text-purple-700',
  yellow: 'bg-yellow-400/20 text-yellow-700',
}
 
interface BadgeProps extends React.ComponentPropsWithRef<'span'> {
  color?: keyof typeof colors
}
 
export const Badge = ({ children, color = 'gray', ...props }: BadgeProps) => {
  return (
    <span
      {...props}
      className={cx(
        'gap-x-1.5 font-medium inline-flex items-center rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5',
        colors[color],
      )}
    >
      {children}
    </span>
  )
}

Appendix

Color Reference

Color	Example
`red`	red
`blue`	blue
`gray`	gray
`green`	green
`orange`	orange
`pink`	pink
`purple`	purple
`yellow`	yellow