Badges

Inline status pills for labels, tags, version indicators, and status markers. Badges render as <span> elements and flow naturally within prose text.

Basic Badge

A default primary-colored badge:

New

MARKDOWN

[doc-badge label="New"]

Inline Usage

Badges work inline within text. The Helios theme v3.0 ships with built-in Stable component shortcodes that are Easy to use.

MARKDOWN

The Helios theme [doc-badge label="v3.0"] ships with built-in
[doc-badge label="Stable" color="green"] component shortcodes
that are [doc-badge label="Easy" color="blue"] to use.

Color Variants

Filled (default)

Default Blue Green Yellow Red Purple Plain

MARKDOWN

[doc-badge label="Default"]
[doc-badge label="Blue" color="blue"]
[doc-badge label="Green" color="green"]
[doc-badge label="Yellow" color="yellow"]
[doc-badge label="Red" color="red"]
[doc-badge label="Purple" color="purple"]
[doc-badge label="Plain" color="plain"]

Outline

Default Blue Green Yellow Red Purple Plain

MARKDOWN

[doc-badge label="Default" style="outline"]
[doc-badge label="Blue" color="blue" style="outline"]
[doc-badge label="Green" color="green" style="outline"]
[doc-badge label="Yellow" color="yellow" style="outline"]
[doc-badge label="Red" color="red" style="outline"]
[doc-badge label="Purple" color="purple" style="outline"]
[doc-badge label="Plain" color="plain" style="outline"]

Sizes

Two sizes are available: default and sm.

Default Size Small Size

MARKDOWN

[doc-badge label="Default Size"]
[doc-badge label="Small Size" size="sm"]

With Icons

Add an icon to the badge using the icon parameter:

Star Check Alert

MARKDOWN

[doc-badge label="Star" icon="tabler/star.svg"]
[doc-badge label="Check" icon="tabler/check.svg" color="green"]
[doc-badge label="Alert" icon="tabler/alert-triangle.svg" color="yellow"]

Common Patterns

Status Labels

Published Draft Deprecated Beta

Version Tags

v3.0 v2.x Latest

Method Badges

GET POST PUT DELETE

Parameters

Parameter	Required	Default	Description
`label`	Yes	—	Badge text
`color`	No	`default`	`default`, `blue`, `green`, `yellow`, `red`, `purple`, `plain`
`style`	No	`filled`	`filled` or `outline`
`size`	No	`default`	`default` or `sm`
`icon`	No	—	Icon path (e.g., `tabler/star.svg`)
`classes`	No	—	Extra CSS classes