Badges are used to highlight an item's status for quick recognition.

To create a badge component with only text inside, pass the text as an argument.

The size prop controls the size and padding of a badge. It can take values of "1" | "2", with default being "1".

The variant prop controls the visual style of the badge. The supported variant types are "solid" | "soft" | "surface" | "outline". The variant default is "soft".

The color_scheme prop sets a specific color, ignoring the global theme.

The high_contrast prop increases color contrast of the fallback text with the background.

The radius prop sets specific radius value, ignoring the global theme. It can take values "none" | "small" | "medium" | "large" | "full".

A badge may contain more complex elements within it. This example uses a flex component to align an icon and the text correctly, using the gap prop to ensure a comfortable spacing between the two.