Badge

A compact styled chip for status indicators, counts, and tags.

Usage

A badge is a Label with a fixed pill or square shape — it takes all the same kwargs (text, icon, font, accent), and accent= colors it by status.

Variants

'square' (default) gives a rounded rectangle. 'pill' gives a fully rounded capsule shape, common for counts and status tags.

bs.Badge("Square",  accent="primary")
bs.Badge("Pill",    accent="primary", variant="pill")
bs.Badge("99+",     accent="danger",  variant="pill")

Accent colors

# Square (default)
bs.Badge("Primary",   accent="primary")
bs.Badge("Secondary", accent="secondary")
bs.Badge("Info",      accent="info")
bs.Badge("Success",   accent="success")
bs.Badge("Warning",   accent="warning")
bs.Badge("Danger",    accent="danger")

# Pill
bs.Badge("Primary",   accent="primary",   variant="pill")
bs.Badge("Secondary", accent="secondary", variant="pill")
bs.Badge("Info",      accent="info",      variant="pill")
bs.Badge("Success",   accent="success",   variant="pill")
bs.Badge("Warning",   accent="warning",   variant="pill")
bs.Badge("Danger",    accent="danger",    variant="pill")

In context

Badges are commonly placed inline with other widgets — next to a title, in a table cell, or in a sidebar item.

# Next to a heading
with bs.Row(gap=8, vertical_items="center"):
    bs.Label("Inbox", font="heading-md")
    bs.Badge("12", accent="primary", variant="pill")

with bs.Row(gap=8, vertical_items="center"):
    bs.Label("Alerts", font="heading-md")
    bs.Badge("3", accent="danger", variant="pill")

# Status in a data row
with bs.Row(gap=8, vertical_items="center"):
    bs.Label("Run-A15")
    bs.Badge("Complete", accent="success", variant="pill")

with bs.Row(gap=8, vertical_items="center"):
    bs.Label("Run-A14")
    bs.Badge("2 warnings", accent="warning")
    bs.Badge("Fail",       accent="danger",  variant="pill")

Widget sizing

All widgets accept self-placement kwargs via **kwargs. The parent container determines which options apply — Column / Row parents use the layout kwargs below, grid-based parents use grid kwargs.

Column (vertical layout)

Used inside a Column, App, or any other container with a column layout. Children are arranged top-to-bottom, so horizontal aligns each child across the width and grow shares the vertical space. (vertical does not apply — the order of the children sets their top-to-bottom position.)

horizontal	Cross-axis placement of the widget: 'left', 'center', 'right', or 'stretch' to fill the available width.
grow	Claim and fill a share of the leftover vertical space (the layout direction). True or False.
margin	External spacing in pixels. Accepts an integer (equal on all sides), a 2-tuple (horizontal, vertical), or a 4-tuple (left, top, right, bottom).
margin_x	Horizontal external spacing (left and right). Accepts an integer or a 2-tuple (left, right) for asymmetric spacing. Overrides the horizontal component of margin=.
margin_y	Vertical external spacing (top and bottom). Accepts an integer or a 2-tuple (top, bottom) for asymmetric spacing. Overrides the vertical component of margin=.

Row (horizontal layout)

Used inside a Row or any other container with a row layout. Children are arranged left-to-right, so vertical aligns each child across the height and grow shares the horizontal space. (horizontal does not apply — the order of the children sets their left-to-right position.)

vertical	Cross-axis placement of the widget: 'top', 'center', 'bottom', or 'stretch' to fill the available height.
grow	Claim and fill a share of the leftover horizontal space (the layout direction). True or False.
margin	External spacing in pixels. Accepts an integer (equal on all sides), a 2-tuple (horizontal, vertical), or a 4-tuple (left, top, right, bottom).
margin_x	Horizontal external spacing (left and right). Accepts an integer or a 2-tuple (left, right) for asymmetric spacing. Overrides the horizontal component of margin=.
margin_y	Vertical external spacing (top and bottom). Accepts an integer or a 2-tuple (top, bottom) for asymmetric spacing. Overrides the vertical component of margin=.

Grid

Used inside a Grid container.

row / column	Zero-based row and column indices.
rowspan / columnspan	Number of rows or columns to span.
horizontal	Horizontal placement within the grid cell: 'left', 'center', 'right', or 'stretch' to fill the cell width.
vertical	Vertical placement within the grid cell: 'top', 'center', 'bottom', or 'stretch' to fill the cell height.
margin	External spacing in pixels. Accepts an integer, a 2-tuple (horizontal, vertical), or a 4-tuple (left, top, right, bottom).
margin_x	Horizontal external spacing. Accepts an integer or (left, right).
margin_y	Vertical external spacing. Accepts an integer or (top, bottom).

API

The complete reference for Badge lives on the Widgets API page. At a glance:

Badge

Compact styled chip for status indicators, counts, and tags.

Full Example

with bs.App(title="Badge Demo", padding=20, gap=16) as app:

    # Variants
    bs.Label("Variants", font="heading-sm")
    with bs.Row(gap=8):
        bs.Badge("Square",  accent="primary")
        bs.Badge("Pill",    accent="primary",  variant="pill")
        bs.Badge("99+",     accent="danger",   variant="pill")
        bs.Badge("New",     accent="success",  variant="pill")
        bs.Badge("Beta",    accent="warning",  variant="pill")

    # Accent colors — square
    bs.Label("Accent Colors — Square", font="heading-sm")
    with bs.Row(gap=8):
        for accent in ("primary", "secondary", "info", "success", "warning", "danger"):
            bs.Badge(accent.title(), accent=accent)

    # Accent colors — pill
    bs.Label("Accent Colors — Pill", font="heading-sm")
    with bs.Row(gap=8):
        for accent in ("primary", "secondary", "info", "success", "warning", "danger"):
            bs.Badge(accent.title(), accent=accent, variant="pill")

    # In context — heading with count
    bs.Label("In Context", font="heading-sm")
    with bs.Column(gap=8):
        with bs.Row(gap=8):
            bs.Label("Inbox", font="heading-md")
            bs.Badge("12", accent="primary", variant="pill")

        with bs.Row(gap=8):
            bs.Label("Alerts", font="heading-md")
            bs.Badge("3", accent="danger", variant="pill")

        with bs.Row(gap=8):
            bs.Label("Run-A15")
            bs.Badge("Complete", accent="success",  variant="pill")

        with bs.Row(gap=8):
            bs.Label("Run-A14")
            bs.Badge("2 warnings", accent="warning")
            bs.Badge("Fail",       accent="danger",  variant="pill")

app.run()