New components library - Native UI

︲

︲

Badge

Displays a badge or a component that looks like a badge.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component badge
from components.ui.component import badge

Anatomy

Use the following composition to build a Badge component.

badge()

Examples

Variants

Use the variant prop to change the variant of the badge.

DefaultSecondaryDestructiveOutlineGhost
import reflex as rx

from components.ui.badge import badge


def badge_with_variants() -> rx.Component:
    return rx.el.div(
        badge("Default"),
        badge("Secondary", variant="secondary"),
        badge("Destructive", variant="destructive"),
        badge("Outline", variant="outline"),
        badge("Ghost", variant="ghost"),
        class_name="flex flex-wrap gap-2",
    )

With Icons

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

VerifiedBookmark
import reflex as rx

from components.icons.hugeicon import hi
from components.ui.badge import badge


def badge_with_icon() -> rx.Component:
    return rx.el.div(
        badge(
            hi("CheckmarkBadge01Icon", custom_attrs={"data-icon": "inline-start"}),
            "Verified",
            variant="secondary",
        ),
        badge(
            "Bookmark",
            hi("Bookmark02Icon", custom_attrs={"data-icon": "inline-end"}),
            variant="outline",
        ),
        class_name="flex flex-wrap gap-2",
    )

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

DeletingGenerating
import reflex as rx

from components.ui.badge import badge
from components.ui.spinner import spinner


def badge_with_spinner() -> rx.Component:
    return rx.el.div(
        badge(
            spinner(custom_attrs={"data-icon": "inline-start"}),
            "Deleting",
            variant="destructive",
        ),
        badge(
            "Generating",
            spinner(custom_attrs={"data-icon": "inline-end"}),
            variant="secondary",
        ),
        class_name="flex flex-wrap gap-2",
    )

Link

You can pass in rx.el.a to turn a badge into a link. The badge component accepts *children so any interactive element can be passed to it.

Open Link
import reflex as rx

from components.icons.hugeicon import hi
from components.ui.badge import badge


def badge_as_link() -> rx.Component:
    return badge(
        rx.el.a(
            "Open Link",
            hi("ArrowUpRightIcon", custom_attrs={"data-icon": "inline-end"}),
            href="#link",
            class_name="inline-flex items-center gap-1 text-inherit no-underline",
        ),
    )

Custom Colors

You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the badge component.

BlueGreenSkyPurpleRed
import reflex as rx

from components.ui.badge import badge


def badge_custom_colors() -> rx.Component:
    return rx.el.div(
        badge(
            "Blue",
            class_name="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300",
        ),
        badge(
            "Green",
            class_name="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300",
        ),
        badge(
            "Sky",
            class_name="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300",
        ),
        badge(
            "Purple",
            class_name="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300",
        ),
        badge(
            "Red",
            class_name="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300",
        ),
        class_name="flex flex-wrap gap-2",
    )

API Reference

badge

The badge component displays a badge or a component that looks like a badge.

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
class_namestring-