Badged Text

Badged Text

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 have the badged text element inside an Alert element and inside Heading elements.
• 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.

Badged Text with Default shape

Badged Text with Pill shape

Badged Text inside Heading element.

Example of Badged Text inside a Link element with the Button look showing numerical counts as a way to indicate status.

Badged Text inside an Alert element

Badged Text inside an Alert element which is inside a Heading.

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

Select from a pre-defined list of background and text colors. For any other customizations see here.

Badge Shape

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