Badge

Outlined

index.tsx

Badge Badge Badge Badge Badge Badge Badge Badge Badge

index.tsx

Badge Badge Badge Badge Badge Badge Badge Badge Badge

index.tsx

Badge Badge Badge Badge Badge Badge Badge Badge Badge

index.tsx

Badge Badge Badge Badge Badge Badge Badge Badge Badge

Token	Color for	State/Meaning
--par-color-text-badge-solid-<color>	Badge text (solid)	Solid badge, all colors
--par-color-bg-badge-solid-<color>	Badge background (solid)	Solid badge, all colors
--par-color-border-badge-solid-<color>	Badge border (solid)	Solid badge, all colors
--par-color-text-badge-outlined-<color>	Badge text (outlined)	Outlined badge, all colors
--par-color-bg-badge-outlined-<color>	Badge background (outlined)	Outlined badge, all colors
--par-color-border-badge-outlined-<color>	Badge border (outlined)	Outlined badge, all colors
--par-color-text-badge-glass-<color>	Badge text (glass)	Glass badge, all colors
--par-color-bg-badge-glass-<color>	Badge background (glass)	Glass badge, all colors
--par-color-border-badge-glass-<color>	Badge border (glass)	Glass badge, all colors

Note: Replace color with supported color names: gray, red, green, yellow, blue, orange, cyan, violet, lime.

Prop	Type	Default	Description
label	string		Main label text for the badge.
icon	ReactNode		Icon to display alongside the label/content.
color	'gray' \| 'orange' \| 'violet' \| 'green' \| 'red' \| 'yellow' \| 'blue' \| 'lime' \| 'cyan'	'gray'	Badge color.
size	'md' \| 'sm' \| 'xs'	'md'	Badge size.
dot	boolean	false	Show a small dot (overrides icon).
variant	'outlined' \| 'solid' \| 'glass'	'outlined'	Badge visual style.
...spanProps	HTMLSpanElement props		All native span props (className, style, etc.)

Note: Badge extends all native props from HTMLSpanElement. See MDN: span element for more details.