Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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,
)

A badge component.

PropTypeDescriptionValues
variantLiteral

Variant of the badge ("solid" | "subtle" | "outline")

color_schemestr

The color of the badge

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting