--- title: "Badge" description: "A small label for status, counts or categories." url: "https://susonwaiba.github.io/htmx-ui/docs/components/badge" section: "Components" --- # Badge A small label for status, counts or categories. ```html New ``` ## Variants ```html Primary Secondary Outline Ghost Link ``` ## Status Soft, tinted variants for status. They use the `--info`, `--success`, `--warning` and `--danger` tokens. ```html Info Success Warning Danger ``` Add `.badge-solid` to fill one with its colour, for status that has to stand out, such as a destructive one. ```html Info Success Warning Destructive ``` ## With a dot or icon Icons go before or after the text and are sized to it. ```html Operational Degraded Verified Featured Next ``` ## With a spinner A [spinner](https://susonwaiba.github.io/htmx-ui/docs/components/spinner) inside a badge takes the icon size. With `.htmx-indicator`, it takes no space until the badge's request starts. ```html Syncing Deploying Queued ``` ## Link A badge can be an `` (or a `

Billing Beta

``` ## Reference | Class | Description | | --- | --- | | `.badge` | Base class. On an or