---
author: "Mark Dumay"
title: "Badge"
date: 2023-01-11
description: "Use the badge to enrich headings and buttons."
group: components
layout: docs
---

## Overview

Badges can be added to headings and buttons. The badge for a button is part of a [custom shortcode]({{< ref "button" >}} "custom shortcode"). The example below illustrates the HTML code for a heading.

## Arguments

N/A

## Example

Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.

```html
<h6>Example heading of size four <span class="badge bg-secondary">New</span></h6>
```

The result looks like this.

<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>