Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

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.

New
rx.badge("New")

solid

soft

surface

outline

Accent

England!
England!
England!
England!

England!
England!
England!
England!

Gray

England!
England!
England!
England!

England!
England!
England!
England!

The size prop controls the size and padding of a badge. It can take values of "1" | "2", with default being "1".

NewNewNew
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".

NewNewNewNewNew
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.

NewNewNewNew
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.

NewNewNewNew
NewNewNewNew
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".

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

A stylized badge element.

Basic Badge
PropTypeDescriptionValues
variantLiteral

The variant of the badge

sizeLiteral

The size of the badge

color_schemeLiteral

Color theme of the badge

high_contrastbool

Whether to render the badge with higher contrast color against background

radiusLiteral

Override theme radius for badge: "none" | "small" | "medium" | "large" | "full"

Event Triggers

See the full list of default event triggers
← AvatarCallout →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting