Indicators

Adding and styling indicators.

What Is An Indicator?

The part we call 'Indicator' is a part that places an element on the corner of another element. This could include a badge with text inside; a blank colored badge, or a button.

This type of indicator is typically used for notification purposes (eg that content is new; that a field is required), or simply highlighting a part using a colored dot.

Example Indicators

The Components of Indicators

An Indicator (parent) consists of a few different parts (children). These parts may include:

• An Indicator Item, which may have a badge and/or text inside

• Another part such as a card, image, button, text input, or another part that needs to show the indicator.

Below is an example showing a card, that has an indicator. This particular indicator contains a badge with text in it.

Example of Parent/Child Relationships in an Example Indicator

Adding an Indicator

Choose the indicator most closely aligned with what you need from the Parts Library.

Select the part where you’d like to add your indicator and click ‘+ add to page’.

Formatting an Indicator

Like many other parts, borders, shadow, opacity, rounding, and spacing can be applied using the property editor on the right, once the Indicator has been selected.

If your Indicator has a badge, the text within the badge is edited the same as the way text is edited in other parts, using both the Text Editor and the Font Editor in the property editing panel on the right. The same is true for any other formatting of the badge, where size, colors, icons, variants, and spacing can be applied as needed.

Changing the Position of the Indicator Item

An Indicator Item can be aligned horizontally at the start, center, or end. It can be aligned vertically at the top, middle, or bottom.

To set the horizontal and vertical alignment, select the Indicator Item.

Then go to the 'Align Horizontal' property, and choose whether the Indicator Item should be at the start, center, or end. Then go to the 'Align Vertical' property, and choose whether the Indicator Item should be at the top, middle, or bottom.

Changing the Position of the Indicator Item

Related Information

Text

Badges

Cards

Buttons

Customizing and formatting