Shortcode Showcase: Inline & Interactive

Mar 23, 2026

Shortcodes for inline content and interactive elements.


btn

Renders a <button> or an <a> depending on whether href is set.

As a link:

Go Home
{{< btn type="primary" >}}Click{{< /btn >}}
{{< btn href="/posts" type="success" >}}Posts{{< /btn >}}

type options: primary success warning error default


badge

Inline label — great for status tags, version numbers, or flags.

NEW DONE WIP BUG

{{< badge type="warning" >}}WIP{{< /badge >}}

text

Applies a NES theme colour to inline or block text.

PrimarySuccessWarningErrorDisabled

Use tag="p" or tag="strong" to change the element:

This is a primary-coloured paragraph.

{{< text type="error" >}}Danger!{{< /text >}}
{{< text type="success" tag="p" >}}All systems go.{{< /text >}}

type options: primary success warning error disabled tag options: span (default) p strong


balloon

Speech bubble with a tail pointing left or right.

It’s dangerous to go alone — take this!
Thanks. I won’t forget this.
{{< balloon from="left" >}}Hello!{{< /balloon >}}
{{< balloon from="right" >}}World!{{< /balloon >}}