> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-tags.md).

# AX - Tags

## Overview

**AX - Tags** is a Lightning App Builder component that displays your Salesforce records as compact, visual tags on record pages, app pages, and home pages.

Perfect for categorization displays, skill badges, multi-select picklist visualization, or anywhere you need a compact alternative to traditional lists

Use this simple tutorial to learn the basics of the Tags component and start building your use cases.

{% @arcade/embed url="<https://app.arcade.software/share/ZZB5CVPhLEAPuCH3bj0u>" flowId="ZZB5CVPhLEAPuCH3bj0u" %}

### Use Cases

#### Account & Contact Management

* Display related industries, partner types, or product interests on Account pages
* Show skills, languages, or certifications linked to Contact records
* Highlight account segments, lead sources, or customer tiers

#### Opportunity & Sales Management

* Present associated products, competitor names, or key stakeholders on Opportunity pages
* Display sales territories, lead sources, or opportunity types
* Show related campaigns or marketing channels

***

## Configuration

{% hint style="success" %}

#### Using a variant for colour coding

This component allows for the displayed records to be **colour coded**. To achieve this, create a formula field on your object returning the values Success, Yellow and Error.

To each of these values will correspond a colour matched by the component as such :

* **Success** = Green
* **Warning** = Yellow
* **Error** = Red

Go to Use case example 1 to see this in action.
{% endhint %}

### Properties

| Label                           | Type    | Default | Required | Description                                                                                                                                               |
| ------------------------------- | ------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Object API Name                 | String  | —       | Yes      | API name of the Salesforce object used to retrieve the records displayed as tags. Examples: Contact, Opportunity, Custom\_Object\_\_c.                    |
| Filter                          | String  | —       |          | SOQL WHERE clause used to filter which records are shown as tags. Example: Status = 'Active' or Type\_\_c = 'Premium'.                                    |
| Order By                        | String  | —       |          | Field API name used to sort retrieved records before rendering tags. Example: Name, CreatedDate.                                                          |
| Maximum Number of Records       | Integer | —       |          | The maximum number of records to retrieve and display as tags. Useful for preventing clutter when there are many related records.                         |
| Label Field Name                | String  | —       | Yes      | Field API name used as the text label for each tag. Examples: Name, Skill\_\_c, Category\_\_c.                                                            |
| Variant Field Name              | String  | —       |          | Field API name that determines the tag's visual variant (e.g., success, warning, error) for conditional formatting. Examples: Priority\_\_c, Status\_\_c. |
| Clickable                       | Boolean | `false` |          | If true, makes tags clickable so they link directly to the related record's detail page.                                                                  |
| Outline                         | Boolean | `false` |          | If true, displays tags with an outlined style instead of a solid fill.                                                                                    |
| Single Line                     | Boolean | `false` |          | If true, forces all tags to display in a single horizontal line. Overflowing tags will be truncated or hidden.                                            |
| Header - Title                  | String  | —       |          | Text shown as the main heading above the audio player. Ideal for contextual labeling, such as “Top Opportunities” or “Recent Cases.”                      |
| Header - Caption                | String  | —       |          | Subheading text shown below the main title. Used to provide additional context such as “Sorted by Close Date” or “Filtered by Priority.”                  |
| Header - Icon Name              | String  | —       |          | The Lightning Design System name of the icon (e.g.,…                                                                                                      |
| Header - Show Number of Records | Boolean | `false` |          | If true, displays the total number of records associated with the tags in the header.                                                                     |
| Display as Card                 | Boolean | `true`  |          | If true, displays all tags inside a styled card container for better visual presentation in dashboards or record pages.                                   |

## Use Case Examples

### Example 1: Contact Skills on Account Page

{% @arcade/embed url="<https://app.arcade.software/share/GbRkXqliIck3YIzIAzwA>" flowId="GbRkXqliIck3YIzIAzwA" %}

**Scenario**: Display skills available within an account's team members with proficiency-based colour coding.

* Create a Skills custom object with the various skills you wish to track : **Skill\_\_c**
* Create a Contact Skills custom object that will act as a junction object between Contacts and Skills : `Contact_Skill__c`
* Create 4 custom fields on the `Contact_Skill__c` object
  * Lookup field to Contact : `Contact__c`
  * Lookup field to Skill : `Skill__c`
  * Picklist to track your contact skill level : `Proficiency_Level__c` with values (Beginner / Intermediate / Advanced)
  * Text formula field to colour code your tags depending on the `Proficiency_Level__c` picklist value : `Colour_Value_F__c`
  * Use this code : `CASE(Proficiency_Level__c, 'Beginner', 'Error', 'Intermediate', 'Warning', 'Success')`
  * The component records will be colour coded according to these expected values: **Success** = Green, **Warning** = Yellow, **Error** = Red

**Steps**

### Example 2: Display Opportunity related Products

{% @arcade/embed url="<https://app.arcade.software/share/iHaVVPeFzzmKgYoXrkx8>" flowId="iHaVVPeFzzmKgYoXrkx8" %}

**Scenario**: Create a clear and impactful view of an Opportunity's products to allow your reps to see products at a glance.

**Steps**

{% stepper %}
{% step %}

#### **Navigate to Lightning App Builder**

{% endstep %}

{% step %}

#### **Drag the Tags component onto your page layout**

{% endstep %}

{% step %}

#### **Configure the data source**

* Set **Object API Name** to `OpportunityLineItem`
* Set **Filter** to `OpportunityId = '{{Record.Id}}'`
* Set **Order By** to `Name`
  {% endstep %}

{% step %}

#### **Configure the header**

* Set **Header Title** to `SelectedProducts`
* Set **Header Icon Name** to `standard:product`
* Set **Display as Card** to check for visual separation
  {% endstep %}

{% step %}

#### **Save & review**

{% endstep %}
{% endstepper %}

## Key Considerations

* **Visual Design:** Use color variants sparingly; choose outline vs. filled and single- vs. multi-line display to suit your layout.
* **Performance:** Set record limits and use specific filters to keep large datasets responsive.
* **User Experience:** Enable clickable tags for navigation, and add header titles, captions, and meaningful variant fields for categorization.
* **Data Quality:** Use concise label fields that read well as tags, and verify variant values map to meaningful visual distinctions.

***

## Troubleshooting Common Issues

* **Tags Not Appearing:** Verify the Object API Name and SOQL filter return results, and that users can view the object and fields.
* **Incorrect Colors/Variants:** Confirm the Variant Field Name exists, is accessible, and contains values that map to Lightning Design System variant styles.
* **Layout Issues:** If tags are cut off, raise the limit or adjust single-line; test responsive display and header length on mobile.
* **Navigation Problems:** Ensure clickable tags point to existing records that users have permission to view.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-tags.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.