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?