components

Badge

Highlight statuses or counts with compact labels

Source CodeRadix UI
Loading

Installation



Usage


Imports


/components/ui/badge.tsx


Code


/components/ui/badge.tsx




Examples


Badge Color


Loading


Badge Variants


Loading


Badge Sizes


Loading


Badge With Icon


Loading


Badge With Dot


Loading


Badge With Avatar


Loading


Badge With Cross


Loading


Rounded Badge


Loading


Nested Badge


Loading




Props


<Badge>
NameDefaultValues
variantneutralneutralstrongoutlinesoft
size24202428
colorprimaryprimaryinfosuccesswarningdanger
dotfalseboolean
asChildfalseboolean