Docs

Badge

Posted on December 29, 2023  (Last modified on June 7, 2025) • 3 min read • 445 words
Component  
Component  
Share via

Use the badge shortcode to enrich headings.

Overview   Arguments   Examples   Heading Badges   Colored Badges   Pill Badges  

Overview  

Added in v0.19.0   

Badges can be added to headings and buttons. The badge for a button is part of a Custom Shortcode. The example below illustrates the shortcode for a heading.

Example heading of size four New

markdown 
Example heading of size four {{< badge title="New" >}}
{.h4}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select secondary Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select secondary
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Examples  

Use the badge shortcode to display a badge for a heading. See the Bootstrap Documentation  for more information.

Heading Badges  

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. Use Hugo’s Curly Brackets Syntax  to apply a heading class.

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New

Heading 6 New

markdown 
Heading 1 {{< badge title="New" >}}
{.h1}

Heading 2 {{< badge title="New" >}}
{.h2}

Heading 3 {{< badge title="New" >}}
{.h3}

Heading 4 {{< badge title="New" >}}
{.h4}

Heading 5 {{< badge title="New" >}}
{.h5}

Heading 6 {{< badge title="New" >}}
{.h6}

Colored Badges  

Set a background color with contrasting foreground color with the color argument.

primary secondary success danger warning info light dark
markdown 
{{< badge title="primary" color="primary" >}}
{{< badge title="secondary" color="secondary" >}}
{{< badge title="success" color="success" >}}
{{< badge title="danger" color="danger" >}}
{{< badge title="warning" color="warning" >}}
{{< badge title="info" color="info" >}}
{{< badge title="light" color="light" >}}
{{< badge title="dark" color="dark" >}}

Pill Badges  

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

primary secondary success danger warning info light dark
markdown 
{{< badge title="primary" color="primary" class="rounded-pill" >}}
{{< badge title="secondary" color="secondary" class="rounded-pill" >}}
{{< badge title="success" color="success" class="rounded-pill" >}}
{{< badge title="danger" color="danger" class="rounded-pill" >}}
{{< badge title="warning" color="warning" class="rounded-pill" >}}
{{< badge title="info" color="info" class="rounded-pill" >}}
{{< badge title="light" color="light" class="rounded-pill" >}}
{{< badge title="dark" color="dark" class="rounded-pill" >}}
On this page: