Skip to main content

​
Import

from reflex_ui import badge

​
Description

A badge component for displaying labels, status indicators, or categorization tags. Supports multiple color schemes, variants, and sizes.

​
Usage

badge(
    "New",
    color="primary",
    variant="solid",
    size="sm"
)

​
Props

​
color
BaseColorType
default:"'primary'"
Badge color theme. Available colors:Semantic Colors:
  • primary - Primary brand color
  • secondary - Secondary brand color
  • info - Information states
  • success - Success states
  • warning - Warning states
  • destructive - Destructive actions
Gray Scale:
  • gray, mauve, slate, sage, olive, sand
Colors:
  • tomato, red, ruby, crimson, pink, plum, purple, violet
  • iris, indigo, blue, cyan, teal, jade, green, grass
  • brown, orange, sky, mint, lime, yellow, amber, gold, bronze
​
variant
Literal['solid', 'soft']
default:"'solid'"
Badge style variant:
  • solid: Filled background with contrasting text
  • soft: Subtle background with colored text
​
size
Literal['xs', 'sm', 'md']
default:"'sm'"
Badge size:
  • xs: Extra small (h-4, text-[11px])
  • sm: Small (h-5, text-xs)
  • md: Medium (h-6, text-sm)

​
Size Specifications

SizeHeightText SizeIcon SizePaddingBorder Radius
xs16px11px12px6pxxs
sm20px12px14px6pxxs
md24px14px16px8pxsm

​
Color Behavior

​
Solid Variant

Light colors (sky, mint, lime, yellow, amber, secondary) use dark text for contrast. Other colors use white text.

​
Soft Variant

Uses a subtle background (color-3) with colored text (color-11) for all colors.

​
Examples

​
Basic Badges

import reflex as rx
from reflex_ui import badge

def badge_examples():
    return rx.box(
        badge("New", color="primary"),
        badge("Success", color="success"),
        badge("Warning", color="warning"),
        badge("Error", color="destructive"),
        display="flex",
        gap="2"
    )

​
Variant Comparison

import reflex as rx
from reflex_ui import badge

def variant_badges():
    return rx.box(
        badge("Solid", variant="solid", color="blue"),
        badge("Soft", variant="soft", color="blue"),
        display="flex",
        gap="2"
    )

​
Size Variations

import reflex as rx
from reflex_ui import badge

def size_badges():
    return rx.box(
        badge("XS", size="xs"),
        badge("Small", size="sm"),
        badge("Medium", size="md"),
        display="flex",
        gap="2",
        align_items="center"
    )

​
Badges with Icons

import reflex as rx
from reflex_ui import badge
from reflex_ui.components.icons.hugeicon import hi

def icon_badges():
    return rx.box(
        badge(
            hi("CheckmarkIcon"),
            "Verified",
            color="success"
        ),
        badge(
            hi("AlertCircleIcon"),
            "Pending",
            color="warning"
        ),
        badge(
            hi("StarIcon"),
            "Featured",
            color="amber"
        ),
        display="flex",
        gap="2"
    )

​
Status Indicators

import reflex as rx
from reflex_ui import badge

def status_badges():
    return rx.box(
        badge("Active", color="green", variant="soft"),
        badge("Inactive", color="gray", variant="soft"),
        badge("Pending", color="yellow", variant="soft"),
        badge("Rejected", color="red", variant="soft"),
        display="flex",
        gap="2"
    )

​
Category Tags

import reflex as rx
from reflex_ui import badge

def category_tags():
    return rx.box(
        badge("Python", color="blue"),
        badge("JavaScript", color="yellow"),
        badge("React", color="cyan"),
        badge("Design", color="purple"),
        display="flex",
        flex_wrap="wrap",
        gap="2"
    )

​
Count Badges

import reflex as rx
from reflex_ui import badge

def count_badge():
    return rx.box(
        rx.text("Notifications"),
        badge("5", color="red", size="xs"),
        display="flex",
        align_items="center",
        gap="2"
    )

​
Interactive Badge

import reflex as rx
from reflex_ui import badge

class BadgeState(rx.State):
    selected: str = "all"

def interactive_badges():
    return rx.box(
        badge(
            "All",
            color="primary" if BadgeState.selected == "all" else "gray",
            variant="solid" if BadgeState.selected == "all" else "soft",
            on_click=lambda: BadgeState.set_selected("all"),
            cursor="pointer"
        ),
        badge(
            "Active",
            color="primary" if BadgeState.selected == "active" else "gray",
            variant="solid" if BadgeState.selected == "active" else "soft",
            on_click=lambda: BadgeState.set_selected("active"),
            cursor="pointer"
        ),
        badge(
            "Completed",
            color="primary" if BadgeState.selected == "completed" else "gray",
            variant="solid" if BadgeState.selected == "completed" else "soft",
            on_click=lambda: BadgeState.set_selected("completed"),
            cursor="pointer"
        ),
        display="flex",
        gap="2"
    )

​
Styling

The badge component is built on the <span> element and accepts all standard styling props: 
badge(
    "Custom",
    color="blue",
    class_name="font-bold uppercase tracking-wider"
)

​
Accessibility

Badges are visual indicators and may need additional ARIA attributes for screen readers: 
badge(
    "3",
    color="red",
    size="xs",
    role="status",
    aria_label="3 unread notifications"
)

Build docs developers (and LLMs) love

Get started for freeTalk to us