# Badged Text

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FOFRm9OUj1KzqPJYPnRol%2Fimage.png?alt=media&#x26;token=4fbab8d2-5633-43ad-81cb-718bbac425c3" alt="" width="63"><figcaption><p>Badged Text</p></figcaption></figure></div>

The **`Badged Text`** element is typically used to display numerical counts, notifications, status labels, or any other short and important messages.

The badged text element provides a quick way to customize the shape, the background and text colors (see below). You can further customize it by using the [Custom CSS Classes](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes) setting or by using the [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab).

You can add a badged text to your page in two ways:

* Drag and drop the Badge Text element from the [Page Element Library](https://docs.zingy.ai/app-editor/page-editor-tour#page-element-library).&#x20;
* Convert any exiting text on the page to a Badged Text element using the *<mark style="color:green;">**Bdg**</mark>* button on the [Text Edit Toolbar](https://docs.zingy.ai/app-editor/page-editor/editing-text).

The badged text element inherits the font properties from the parent element chain or uses the Body font defined at the app level (in App Settings). You can customize this by using the [Custom CSS Classes](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes) setting or by using the [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab).

{% hint style="info" %}

* You can have the badged text element inside an [Alert](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/alert) element and inside [Heading](https://docs.zingy.ai/app-editor/editing-text#heading) elements.
* You can dynamically create an Badged Text element using the [Badged Text](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/badged-text) block in [Page Flow](https://docs.zingy.ai/app-editor/page-flow).
  {% endhint %}

***

## Examples

The following images show examples of Badged Text elements.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FYUgxiv0Sput0QtYJzTA3%2Fimage.png?alt=media&#x26;token=1d878bb4-9f01-4e6d-bfc4-fe51341e6f41" alt=""><figcaption><p>Badged Text with Default shape</p></figcaption></figure>

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FS95BCrpB98LKohuTfR70%2Fimage.png?alt=media&#x26;token=08cf9006-4c90-4a80-9e95-796bbb66b8f1" alt=""><figcaption><p>Badged Text with Pill shape</p></figcaption></figure>

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FRBiXZwyAt9gWdn7GUur6%2Fimage.png?alt=media&#x26;token=b167acb2-c3cd-40d0-b22e-a8c6fa02639e" alt=""><figcaption><p>Badged Text inside <a href="../../editing-text#heading">Heading</a> element.</p></figcaption></figure>

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F1iSpGf0DzJJH42ZN9JUp%2Fimage.png?alt=media&#x26;token=594dc571-f645-4011-85a2-514f5fca3837" alt=""><figcaption><p>Example of Badged Text inside a <a href="link">Link</a> element with the Button look showing numerical counts as a way to indicate status.</p></figcaption></figure>

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F3HwmGNmmfrTp9RhJDVuV%2Fimage.png?alt=media&#x26;token=5f6d3201-c8c4-43d7-9b44-2347dfa28b37" alt=""><figcaption><p>Badged Text inside an <a href="alert">Alert</a> element</p></figcaption></figure>

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FLpRyo5dFBniN3CRPkGxB%2Fimage.png?alt=media&#x26;token=b46a0699-10ee-4cc6-bcc8-36fe7c6a2c2d" alt=""><figcaption><p>Badged Text inside an <a href="alert">Alert</a> element which is inside a <a href="../../editing-text#heading">Heading</a>.</p></figcaption></figure>

{% hint style="success" %}
You can have a badged text inside a button. Instead of a [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button) element, use a [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element with the [Type](https://docs.zingy.ai/app-editor/page-editor/link#type) setting set to *Button* and customize the [Button Look](https://docs.zingy.ai/app-editor/page-editor/link#button-look) and [Button Size](https://docs.zingy.ai/app-editor/page-editor/link#button-size) settings.
{% endhint %}

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Badge Style`

Select from a pre-defined list of background and text colors. For any other customizations see [here](https://docs.zingy.ai/app-editor/page-editor/page-element-settings).

### `Badge Shape`

Select between the Default (rectangular) and a Pill shape.