# Badge

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

```slint
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

```slint
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`.

```slint
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.

```slint
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`.

```slint
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.