Stylized badge element.
This component is based on the span
element and supports common margin props.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
size | Responsive<"1" | "2" | "3"> | "1" |
variant | "solid" | "soft" | "surface" | "outline" | "soft" |
color | enum | |
highContrast | boolean | |
radius | "none" | "small" | "medium" | "large" | "full" |
Use the size
prop to control the size.
Currently, we recommend using only sizes 2 and 3 following the ScaleUI Radix design system.
Use the variant
prop to control the visual style.
Use the color
prop to assign a specific color.
Use the radius
prop to assign a specific radius value.