Badge

A small pill for a status, a tag or a count, in the tones the theme publishes.

import { Badge, BadgeVariant, BadgeSize } from "@glint/components/badge.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Badge { text: "Active"; leading-icon: IconSet.Check; }
            Badge { text: "Beta"; variant: BadgeVariant.secondary; }
            Badge { text: "Outline"; variant: BadgeVariant.outline; }
            Badge { text: "Deprecated"; variant: BadgeVariant.destructive; }
        }
    }
}

Usage

import { Badge, BadgeVariant } from "@glint/components/badge.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 8px;

            Badge {
                text: "v2.4.0";
                variant: BadgeVariant.secondary;
            }
        }
    }
}

Badge presents a compact rounded chip for metadata, tags, and status indications.

Examples

Variants

Badges support six semantic styles: default, secondary, outline, destructive, ghost, and link.

import { Badge, BadgeVariant } from "@glint/components/badge.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 240px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 8px;

            Badge { text: "Default"; variant: BadgeVariant.default; }
            Badge { text: "Secondary"; variant: BadgeVariant.secondary; }
            Badge { text: "Outline"; variant: BadgeVariant.outline; }
        }

        HorizontalLayout {
            alignment: center;
            spacing: 8px;

            Badge { text: "Destructive"; variant: BadgeVariant.destructive; }
            Badge { text: "Ghost"; variant: BadgeVariant.ghost; }
            Badge { text: "Link"; variant: BadgeVariant.link; }
        }
    }
}

Sizes

Use size: BadgeSize.sm for dense tables or compact UI rows, and size: BadgeSize.default for standard content badges.

import { Badge, BadgeSize } from "@glint/components/badge.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Badge {
                text: "Small badge";
                size: BadgeSize.sm;
            }

            Badge {
                text: "Default badge";
                size: BadgeSize.default;
            }
        }
    }
}

Icons and slotted content

Badges accept leading-icon, trailing-icon, or child components such as Spinner.

import { Badge, BadgeVariant } from "@glint/components/badge.slint";
import { Spinner } from "@glint/components/spinner.slint";
import { Tokens } from "@glint/theme/tokens.slint";
import { IconSet } from "@lucide";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Badge {
                text: "Verified";
                leading-icon: IconSet.Check;
            }

            Badge {
                text: "Next";
                trailing-icon: IconSet.ArrowRight;
                variant: BadgeVariant.outline;
            }

            Badge {
                text: "Syncing";
                variant: BadgeVariant.secondary;

                Spinner {
                    size: 12px;
                    tint: Tokens.color-muted-foreground;
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`variant`	`in BadgeVariant`	`BadgeVariant.default`	Visual style — default, secondary, outline, destructive, ghost, link.
`size`	`in BadgeSize`	`BadgeSize.default`	Height + padding — sm, default, lg.
`text`	`in string`	no default	Label rendered inside the badge.
`leading-icon`	`in LucideIcon`	no default	Glyph before the label, normally selected from `IconSet` in lucide-slint.
`trailing-icon`	`in LucideIcon`	no default	Glyph after the label, normally selected from `IconSet` in lucide-slint.

Enums

Enum	Values
`BadgeVariant`	`default`, `secondary`, `outline`, `destructive`, `ghost`, `link`
`BadgeSize`	`sm`, `default`

Accessibility

Text role. The badge announces as accessible-role: text with its text as accessible label.
Icon deduplication. Embedded icons are silenced from the screen reader tree so labels are not read redundantly.