Contents

Cancel

Recommended Articles

  1. unify-apps

    Indexing

    Unify AI

    Transform raw content into searchable knowledge through AI-powered indexing and vector embeddings

  2. unify-apps

    JobNimbus

    Unify Integrations

    Integrate your application with JobNimbus to manage leads, track jobs, and streamline your workflow processes efficiently

  3. unify-apps

    IMAP

    Unify Integrations

    Integrate your app with IMAP to enable seamless email synchronization, real-time access, and enhanced communication workflows.

  4. unify-apps

    Preview Your Work

    Unify Automations

    Effortlessly review & monitor your automation’s performance

  5. unify-apps

    QuickBooks

    Unify Integrations

    Integrate your app with QuickBooks to streamline accounting, automate invoicing, and manage finances effortlessly

  6. unify-apps

    FTP/FTPS

    Unify Integrations

    Connect your app with FTP/FTPS to automate secure file transfers and streamline data exchange across systems.

  7. unify-apps

    Filters

    Unify Applications

    Enable users to refine, search, and sort data effortlessly across dashboards and datasets

  8. unify-apps

    Insided

    Unify Integrations

    Integrate your app with Insided to enhance customer engagement, streamline community management, and drive self-service support.

  9. unify-apps

    Facebook Ads

    Unify Integrations

    Connect your app with Facebook Ads to automate campaign management, optimize ad performance, and track marketing success.

  10. unify-apps

    Gainsight

    Unify Integrations

    Integrate your app with Gainsight to enhance customer success, automate engagement workflows, and drive retention

  11. unify-apps

    Livestorm

    Unify Integrations

    Integrate your app with Livestorm to streamline webinar hosting, automate event management, and enhance audience engagement.

  12. unify-apps

    Snowflake

    Unify Automations

    Connect to Snowflake for fast, scalable cloud data warehousing and analytics

  13. unify-apps

    Cognito Forms

    Unify Integrations

    Integrate your app with Cognito Forms to create custom forms, automate data collection, and streamline workflows

  14. unify-apps

    Button

    Unify Applications

    Create interactive elements with ease using buttons

  15. unify-apps

    BambooHR

    Unify Automations

    Integrate your app with BambooHR to streamline HR management, automate employee data processing, and enhance onboarding workflows

  16. unify-apps

    Build your first automation

    Unify Automations

    Learn how to build your automation step by step

  17. unify-apps

    User Management

    Unify Applications

    Efficiently manage user roles and permissions

  18. unify-apps

    Microsoft Teams

    Unify Automations

    Connect your app with Microsoft Teams to enhance communication, automate workflows, and foster collaboration across your organization

#
Unify Applications
Logo
Add Components to your Interface
Logo
Tag

Tag

Logo

2 mins READ

Overview

Tag component is a visual label used to highlight, or display status information in your application. This article explains how to configure and utilize Tag components.

Image
Image

Key Properties

After adding a Tag component to your design, customize it using the properties panel on the right side of the interface.

  • Set Label: Enter the text to be displayed within the tag.

Thumbnail

Note

You can use the data pills from the input data tab while configuring the text to be shown. This can be used to update the data dynamically.

Appearance Customization

Customize the Tag's appearance to match your application's design:

Image
Image

Property

Description

Variant

Select the variant style for the tag (e.g., Color, Clear - No Colour)

Color

Choose the color scheme for the tag.

Shape

Select between Rounded or Square corners

Start Decorator

Add an optional icon at the beginning of the tag

End Decorator

Add an optional icon at the end of the tag

Show Dot

Toggle to display a dot indicator on the tag

Disabled

Set conditions to disable the tag

Visibility

Control the tag's visibility (visible, hidden, or conditional)

Define Interactions

Set up interactions for when users click or interact with the tag:

  1. Navigate to the "Interactions" section in the properties panel.

  2. Click "Add Interaction".

  3. Choose the type of interaction (e.g., filter data, trigger action, show modal).

  4. Configure the specific details of the chosen interaction.

Refer

Refer to the Interactions article for more detailed information on setting up various types of interactions.

Best Practices

  • Consistency: Use tag styles consistently for similar types of information across your application.

  • Clarity: Keep tag text concise and clear to ensure readability.

  • Color Usage: Use colors meaningfully to convey information or status.