Library
/
Datadisplay
/
Badge
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.
rx.badge("New")solid
soft
surface
outline
Accent
Gray
The size prop controls the size and padding of a badge. It can take values of "1" | "2", with default being "1".
rx.flex(
rx.badge("New"),
rx.badge("New", size="1"),
rx.badge("New", size="2"),
align="center",
spacing="2",
)The variant prop controls the visual style of the badge. The supported variant types are "solid" | "soft" | "surface" | "outline". The variant default is "soft".
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",
)The color_scheme prop sets a specific color, ignoring the global theme.
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",
)The high_contrast prop increases color contrast of the fallback text with the background.
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",
)The radius prop sets specific radius value, ignoring the global theme. It can take values "none" | "small" | "medium" | "large" | "full".
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",
)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",
)Did you find this useful?
