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.
Use it to show related records in a space-efficient format—such as skills for a contact, categories for a product, territories for an account, or status labels. Color-code tags by field value for quick visual scanning, and make them clickable so users can navigate directly to records. Tags can wrap across multiple lines or stay in a single row.
Perfect for categorization displays, skill badges, multi-select picklist visualization, or anywhere you need a compact alternative to traditional lists
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
Object API Name
Text
Yes
API name of the Salesforce object used to retrieve records displayed as tags
Contact, Product2, Skill__c
Filter
Text
No
SOQL WHERE clause conditions to filter which records are shown as tags. Supports {{Record.FieldName}} syntax.
Status__c = 'Active'<br>AccountId = '{{Record.Id}}'<br>Type__c = 'Premium'
Order By
Text
No
Field API name used to sort retrieved records before rendering tags
Name, CreatedDate DESC, Priority__c
Limit
Number
No
Maximum number of records to retrieve and display as tags. Useful for preventing clutter with many related records.
10, 25, 50
Label Field Name
Text
Yes
Field API name used as the text label for each tag
Name, Skill__c, Category__c, Title
Variant Field Name
Text
No
Field API name that determines the tag's visual variant (color) for conditional formatting
Priority__c, Status__c, Type__c
Clickable
Checkbox
No
Makes tags clickable so they link directly to the related record's detail page
Checked for navigation, Unchecked for display-only
Outline
Checkbox
No
Displays tags with an outlined style instead of a solid fill
Checked for subtle styling, Unchecked for bold appearance
Single Line
Checkbox
No
Forces all tags to display in a single horizontal line. Overflowing tags will be truncated or hidden.
Checked for compact display, Unchecked for wrapping
Header Title
Text
No
Main heading displayed above the tags. Supports {{Record.FieldName}} syntax.
Skills & Certifications<br>{{Record.Name}} Industries
Header Caption
Text
No
Subtitle or additional context below the main title. Supports {{Record.FieldName}} syntax.
Associated with this contact<br>{{Record.RecordCount__c}} total items
Header Icon Name
Text
No
Salesforce Lightning Design System (SLDS) icon name in format category:icon_name
standard:skill, utility:tags, custom:category
Display as Card
Checkbox
No
Wraps all tags inside a styled card container for better visual presentation
Checked for dashboard sections, Unchecked for inline display
Examples
Example 1: Contact Skills on Account Page
Scenario: Display skills available within an account's team members with proficiency-based color coding.
Prerequisites: This example assumes you have created custom objects and fields including:
Contact_Skill__c(junction object linking Contacts to Skills)Skill_Name__c(text field for skill names)Proficiency_Level__c(picklist field with values like "Beginner", "Intermediate", "Advanced" for color coding)Contact__c(lookup field to Contact object)
Steps
Result: A card displaying skill tags with color-coding based on proficiency level, showing all skills available within the account's contacts.
Best Practices
Visual Design
Use color variants sparingly to maintain readability and avoid overwhelming users
Choose between outline and filled styles based on your page's overall design language
Consider single-line display for sidebars or compact layouts, multi-line for main content areas
Performance Considerations
Set appropriate limits to prevent performance issues with large datasets
Use specific filters to reduce query scope and improve load times
Consider the number of tags when deciding on single-line vs. wrapping display
User Experience
Enable clickable tags when users need to navigate to related records
Provide meaningful header titles and captions to give context about the tag grouping
Use variant fields that provide useful visual categorization (status, priority, type)
Data Quality
Ensure label fields contain concise, readable text that works well in tag format
Verify that variant field values map to meaningful visual distinctions
Test with various data volumes to ensure the display remains useful
Troubleshooting
Tags Not Appearing
Verify the Object API Name is correct and accessible to users
Check that the filter syntax is valid SOQL and returns results
Ensure users have permission to view the specified object and fields
Incorrect Colors/Variants
Verify the Variant Field Name exists on the specified object
Check that the field contains values that map to Lightning Design System variant styles
Ensure the variant field is accessible to users viewing the component
Layout Issues
If tags are cut off, consider increasing the limit or adjusting the single-line setting
For responsive layouts, test how tags display on different screen sizes
Adjust header text length to prevent wrapping issues on mobile devices
Navigation Problems
Ensure clickable tags point to records that users have permission to view
Verify that the related records exist and haven't been deleted
Check that page layouts support the target record type for navigation
Summary
The Tags component provides an efficient way to display related records as visual, interactive elements within Salesforce Lightning pages. With flexible styling options, color-coded variants, and configurable layouts, it enables users to scan and interact with associated data quickly. The component supports both informational displays and navigation workflows, making it valuable for relationship visualization and quick access to related records across various business processes.
Last updated
Was this helpful?