Badge

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

documentationhelp wantedbug

import { Badge } from '@thoody-consulting/components'

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

Prop	Default	Description
Badgeextends the JSX `<span>` element
`color`	`zinc`	The color of the badge.
BadgeButtonextends the Headless UI `Button` component or the `Link` component
`color`	`zinc`	The color of the badge.
`href`	-	The target URL when using the button as a link.

Examples

Basic example

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

documentationhelp wantedbug

import { Badge } from '@thoody-consulting/components'

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 '@thoody-consulting/components'

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 '@thoody-consulting/components'

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

Appendix

Color reference

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

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