Library
/
Chakra
/
Datadisplay
/
Badge
Badges are used to highlight an item's status for quick recognition.
There are 3 variants of badges: solid, subtle, and outline.
ExampleExampleExample
rx.chakra.hstack(
rx.chakra.badge(
"Example", variant="solid", color_scheme="green"
),
rx.chakra.badge(
"Example", variant="subtle", color_scheme="green"
),
rx.chakra.badge(
"Example", variant="outline", color_scheme="green"
),
)Color schemes are an easy way to change the color of a badge.
ExampleExampleExample
rx.chakra.hstack(
rx.chakra.badge(
"Example", variant="subtle", color_scheme="green"
),
rx.chakra.badge(
"Example", variant="subtle", color_scheme="red"
),
rx.chakra.badge(
"Example", variant="subtle", color_scheme="yellow"
),
)You can also customize the badge through traditional style args.
Custom Badge
rx.chakra.badge(
"Custom Badge",
bg="#90EE90",
color="#3B7A57",
border_color="#29AB87",
border_width=2,
)Did you find this useful?
No
Yes
