Badged Text
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252FOFRm9OUj1KzqPJYPnRol%252Fimage.png%3Falt%3Dmedia%26token%3D4fbab8d2-5633-43ad-81cb-718bbac425c3&width=768&dpr=4&quality=100&sign=de1e5f23&sv=1)
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 setting or by using the 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.
Convert any exiting text on the page to a Badged Text element using the Bdg button on the Text Edit Toolbar.
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 setting or by using the Design Tab.
You can dynamically create an Badged Text element using the Badged Text block in Page Flow.
Examples
The following images show examples of Badged Text elements.
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252FYUgxiv0Sput0QtYJzTA3%252Fimage.png%3Falt%3Dmedia%26token%3D1d878bb4-9f01-4e6d-bfc4-fe51341e6f41&width=768&dpr=4&quality=100&sign=1918b705&sv=1)
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252FS95BCrpB98LKohuTfR70%252Fimage.png%3Falt%3Dmedia%26token%3D08cf9006-4c90-4a80-9e95-796bbb66b8f1&width=768&dpr=4&quality=100&sign=938ea7c5&sv=1)
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252FRBiXZwyAt9gWdn7GUur6%252Fimage.png%3Falt%3Dmedia%26token%3Db167acb2-c3cd-40d0-b22e-a8c6fa02639e&width=768&dpr=4&quality=100&sign=a8da4cd5&sv=1)
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252F1iSpGf0DzJJH42ZN9JUp%252Fimage.png%3Falt%3Dmedia%26token%3D594dc571-f645-4011-85a2-514f5fca3837&width=768&dpr=4&quality=100&sign=27c9d421&sv=1)
![](https://docs.zingy.ai/~gitbook/image?url=https%3A%2F%2F3401585094-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmnBepgycwgisXr9ya1N4%252Fuploads%252F3HwmGNmmfrTp9RhJDVuV%252Fimage.png%3Falt%3Dmedia%26token%3D5f6d3201-c8c4-43d7-9b44-2347dfa28b37&width=768&dpr=4&quality=100&sign=74b53df1&sv=1)
You can have a badged text inside a button. Instead of a Button element, use a Link element with the Type setting set to Button and customize the Button Look and Button Size settings.
Options
The Options tab settings for this element are described below:
Badge Style
Badge Style
Select from a pre-defined list of background and text colors. For any other customizations see here.
Badge Shape
Badge Shape
Select between the Default (rectangular) and a Pill shape.
Last updated