Badge

Status labels and tags. Free, MIT · Basics › Labels and tooltips

Installation

npx valyro-cli@latest add badge

npx shadcn@latest add https://valyro.xyz/r/badge.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Badge } from 'valyro-ui';

Prop	Type	Default
`color`	`BadgeColor`	`'gray'`	Hue of the fill, text and dot; `inverted` uses the page foreground as the fill in every variant.
`variant`	`'subtle' \| 'solid' \| 'outline'`	`'subtle'`	`subtle` tinted fill, `solid` saturated fill with contrasting text, `outline` transparent with a tinted border.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Badge height, padding and text size.
`icon`	`ReactNode`		Icon before the label.
`dot`	`boolean`	`false`	Leading status dot in the badge color.