✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
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.hstack(
rx.badge(
"Example", variant="solid", color_scheme="green"
),
rx.badge(
"Example", variant="subtle", color_scheme="green"
),
rx.badge(
"Example", variant="outline", color_scheme="green"
),
)Color schemes are an easy way to change the color of a badge.
ExampleExampleExample
rx.hstack(
rx.badge(
"Example", variant="subtle", color_scheme="green"
),
rx.badge(
"Example", variant="subtle", color_scheme="red"
),
rx.badge(
"Example", variant="subtle", color_scheme="yellow"
),
)You can also customize the badge through traditional style args.
Custom Badge
rx.badge(
"Custom Badge",
bg="#90EE90",
color="#3B7A57",
border_color="#29AB87",
border_width=2,
)Badge
A badge component.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.