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:
NewMARKDOWN
[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 |