Badge

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

❯buridan add badge

Component Guide

Use the following to build the Badge component.

from components.ui.badge import badge

badge()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/badge.py

Examples

Variants

Use the variant prop to change the badge's style.

Props used: variant on 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

Render an icon inside the badge. Add data-icon="inline-start" or data-icon="inline-end" to the icon to position it correctly (adjusts padding automatically).

Props used: data_icon on the icon child.

VerifiedBookmark

import reflex as rx

from components.core.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

Render a spinner inside the badge — same data-icon positioning convention as icons.

Props used: data_icon on the spinner child.

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

Pass rx.el.a as the badge's child to turn it into a link. badge accepts *children, so any interactive element works.

Props used: none required — pass rx.el.a(...) as a child.

Open Link

import reflex as rx

from components.core.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

Override colors by passing extra classes via class_name.

Props used: class_name on badge.

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

badge("New", variant="secondary")

Prop	Type	Default
`variant`	`Literal["default", "secondary", "destructive", "outline", "ghost", "link"]`	`"default"`
`class_name`	`str`	`""`

Any other prop accepted by a native <span> is also passed straight through.