Basic Example

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

New

rx.badge("New")

Styling

solid

soft

surface

outline

Accent

England!

Gray

England!

Size

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

NewNewNew

rx.flex(
    rx.badge("New"),
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    align="center",
    spacing="2",
)

Variant

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

NewNewNewNewNew

rx.flex(
    rx.badge("New", variant="solid"),
    rx.badge("New", variant="soft"),
    rx.badge("New"),
    rx.badge("New", variant="surface"),
    rx.badge("New", variant="outline"),
    spacing="2",
)

Color Scheme

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

NewNewNewNew

rx.flex(
    rx.badge("New", color_scheme="indigo"),
    rx.badge("New", color_scheme="cyan"),
    rx.badge("New", color_scheme="orange"),
    rx.badge("New", color_scheme="crimson"),
    spacing="2",
)

High Contrast

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

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge(
            "New", variant="solid", high_contrast=True
        ),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge(
            "New", variant="surface", high_contrast=True
        ),
        rx.badge(
            "New", variant="outline", high_contrast=True
        ),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

Radius

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

NewNewNewNewNew

rx.flex(
    rx.badge("New", radius="none"),
    rx.badge("New", radius="small"),
    rx.badge("New", radius="medium"),
    rx.badge("New", radius="large"),
    rx.badge("New", radius="full"),
    spacing="3",
)

Final Example

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.

8.8%

rx.badge(
    rx.flex(
        rx.icon(tag="arrow_up"),
        rx.text("8.8%"),
        spacing="1",
    ),
    color_scheme="grass",
)

API Reference

Badge

A stylized badge element.

Basic Badge

Prop	Type	Description
`variant`	Literal	The variant of the badge
`size`	Literal	The size of the badge
`color_scheme`	Literal	Color theme of the badge
`high_contrast`	bool	Whether to render the badge with higher contrast color against background
`radius`	Literal	Override theme radius for badge: "none" \| "small" \| "medium" \| "large" \| "full"