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


Variant - Strong


Loading


Variant - Outline


Loading


With Icon


Loading


Rounded


Loading


With Cross


Loading


With Dot


Loading


As Child


Loading


Size


Loading




Props


<Badge>
NameDefaultValues
variantneutralneutralstrongoutlinesoft
size24202428
colorprimaryprimaryinfosuccesswarningdanger
dotfalseboolean
asChildfalseboolean
AvatarBanner