Badge

Badge is a small status label in pixel caps, for tags like Live or a change like +12% beside a chart's title. It comes solid or outlined, and passes every span attribute through. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Badge } from "@/components/dithercharts/badge"

<h3>Revenue <Badge>+12%</Badge></h3>
<Badge variant="outline">Beta</Badge>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add badge

Props

It renders a native element, so every other attribute that element takes passes through.