# Badge

> Add compact, semantic status labels without custom colors or JavaScript.

---

LLMS index: [llms.txt](/llms.txt)

---

Use Badge to place a short status beside a feature, option, or release name. The
author chooses a semantic tone; Oink maps it to theme tokens that retain
contrast in light and dark modes.

## When to use {#when-to-use}

Badge works well for lifecycle states such as Beta, New, Experimental, and
Deprecated. Keep the text explicit: color supplements the label and never
replaces it. Use ordinary prose or an alert when the status needs explanation,
instructions, or a deadline.

## Quick start {#quick-start}

### Source {#source}

```go-html-template
{{< badge text="Beta" tone="warning" >}}
{{< badge text="Deprecated" tone="danger" outline=false >}}
{{< badge text="v0.3" tone="info" link="/blog/release/" >}}
```

### Rendered result {#rendered-result}

**Neutral** **Info**
**Supported**
**Beta**
**Deprecated**
[**v0\.3**](/blog/release/)

The final badge is a link. The others are static inline labels.

## Parameters {#parameters}

<!-- prettier-ignore-start -->

**Badge parameters**

- `text` — `string`; required

  A nonempty string shown to the reader.

- `tone` — `enum`; default: `neutral`

  One of `neutral`, `info`, `success`, `warning`, or `danger`.

- `link` — `URL`

  A validated internal, relative, HTTP(S), or `mailto:` destination. When set, the Badge becomes a link.

- `outline` — `boolean`; default: `true`

  Set to `false` to select the filled treatment.

<!-- prettier-ignore-end -->

Pass booleans without quotes. For example, use `outline=false`, not
`outline="false"`. Unknown parameters and invalid tone or link values stop the
Hugo build and report the source position.

## Semantics and fallback {#semantics-and-fallback}

A static badge renders as a `span`; a linked badge renders as an `a`. Oink does
not make it a live status region, so adding a badge does not create unexpected
screen-reader announcements. Its visible text remains present in every output:
Markdown uses emphasized text (and preserves the link), while print and RSS use
static inline content. Badge loads no JavaScript.

## Deliberate limits {#deliberate-limits}

Badge does not accept arbitrary colors, CSS classes, styles, or event handlers.
Version one also has no `icon` parameter. Use a concise textual label now;
content icons can receive a separate public API after their naming, licensing,
accessibility, and Markdown fallback contracts are settled.