45 lines
1014 B
Markdown
45 lines
1014 B
Markdown
---
|
|
components:
|
|
- rx.chakra.Badge
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Badge
|
|
|
|
Badges are used to highlight an item's status for quick recognition.
|
|
|
|
There are 3 variants of badges: `solid`, `subtle`, and `outline`.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
rx.chakra.badge(
|
|
"Custom Badge",
|
|
bg="#90EE90",
|
|
color="#3B7A57",
|
|
border_color="#29AB87",
|
|
border_width=2
|
|
)
|
|
```
|