Skip to main content
The Badge component displays short text labels with customizable colors, variants, and sizes. Perfect for showing status, categories, or counts.

​
Basic Usage

import reflex_ui as ui

ui.badge("New")

​
Variants

Badges come in 2 visual styles: 
ui.badge("Solid", variant="solid")  # Default
ui.badge("Soft", variant="soft")
​
variant
Literal['solid', 'soft']
default:"solid"
The visual style variant. Solid has a filled background, Soft has a subtle background.

​
Sizes

ui.badge("Extra Small", size="xs")
ui.badge("Small", size="sm")  # Default
ui.badge("Medium", size="md")
​
size
Literal['xs', 'sm', 'md']
default:"sm"
The size of the badge

​
Colors

Badges support 47 color options from the Radix color palette: 
ui.badge("Primary", color="primary")  # Default
ui.badge("Success", color="success")
ui.badge("Warning", color="warning")
ui.badge("Destructive", color="destructive")
ui.badge("Info", color="info")
ui.badge("Blue", color="blue")
ui.badge("Green", color="green")
ui.badge("Red", color="red")
​
color
BaseColorType
default:"primary"
Badge color theme. Available colors include: primary, secondary, info, success, warning, destructive, gray, mauve, slate, sage, olive, sand, 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.

​
With Icons

ui.badge(
    ui.icon("CheckIcon"),
    "Verified",
    color="success"
)

​
Common Patterns

​
Status Indicators

ui.badge("Active", color="success", variant="soft")
ui.badge("Pending", color="warning", variant="soft")
ui.badge("Inactive", color="gray", variant="soft")

​
Count Badges

ui.badge("3", color="destructive", size="xs")
ui.badge("99+", color="primary", size="xs")

​
Props Reference

​
class_name
str
Additional CSS classes for styling

​
Styling

From source code at reflex_ui/components/base/badge.py:52-62:
  • Base classes include flex layout and icon sizing
  • Size variants control padding, height, border radius, and font size
  • Light colors (sky, mint, lime, yellow, amber, secondary) use dark text on solid backgrounds for better contrast
  • Color classes are dynamically generated based on variant and color

​
Implementation Details

From source code at reflex_ui/components/base/badge.py:85-112:
  • Extends Reflex’s Span element
  • Automatically generates color-specific classes
  • Validates and applies size, variant, and color at creation time
  • Supports all standard HTML span attributes

Build docs developers (and LLMs) love

Get started for freeTalk to us