Badge

Compact label for status, category, or metadata. Supports solid and dot variants with Tailwind colors.

Installation

npx shadcn@latest add https://www.fluidfunctionalism.com/r/badge.json

Solid

FictionSciencePhilosophyHistoryPoetry

Dot

FictionSciencePhilosophyHistoryPoetry

Sizes

SmallMediumLarge

Colors

GrayRedOrangeAmberYellowLimeGreenEmeraldTealCyanBlueIndigoVioletPurpleFuchsiaPinkRose
GrayRedOrangeAmberYellowLimeGreenEmeraldTealCyanBlueIndigoVioletPurpleFuchsiaPinkRose

API Reference

PropTypeDefaultDescription
variant"solid" | "dot""solid"Visual style. Solid uses a tinted background; dot shows a colored indicator.
size"sm" | "md" | "lg""md"Size of the badge.
colorBadgeColor"gray"Color from the Tailwind palette: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, blue, indigo, violet, purple, fuchsia, pink, rose.