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
Button

Button

Logo

2 min READ

Overview

Button is an interactive component that performs an action when pressed.

The Button component allows users to trigger actions, navigate pages, and interact with various data sources within the application.

Image
Image

Key Properties

Once the Button component is placed on the canvas, you can configure it with following key actions:

  1. Text: Enter the label text for the button in the "Text" field. This is the text that will be displayed on the button.

  2. Interactions: Define the interactions that should occur when the button is clicked. Click the "+" button under "Interactions" to add a new interaction, such as triggering a data source or navigating to another page & many more.

Thumbnail

Refer

You can refer to the Interactions Article for the same.

Appearance Customization

The Button component can be styled to match your application's design:

Property

Description

Color

Select the color from the "Color" dropdown. Options include brand colors, neutral (black) or danger color (red).

Size

Choose the size of the button from the available options: small (sm), medium (md), or large (lg).

Variant

Select the button variant from options like Solid (with background fill), Outline (with outline border), or Ghost (with just text).

Decorators

Add icons to the start or end of the button text by selecting from the "Start Decorator" or "End Decorator" dropdowns.

Width

Define width, minimum width & maximum width under styles. To define width, you need to click on the “+” icon under the  "Styles" section. 

Add Loading State

The Loading State option allows you to indicate that a process is occurring after the button is clicked.

This is useful for actions that take time to complete, such as submitting a form or fetching data from an API. The button will display this state until the action is completed.

Conditional Display

Set conditions to disable or hide the button based on specific criteria by using the "Add Condition" buttons under the "Disabled" and "Hidden" sections.

  1. Disabled: Use the Disabled condition to make the button non-interactive based on specific criteria.

    For example, you can disable the button if a required form field is empty. To set this, click "Add Condition" under the Disabled section and specify the condition.

  2. Hidden: The Hidden condition allows you to hide the button entirely based on certain conditions.

    For example, you might want to hide the button if a specific field in your application has a particular value. To configure this, click "Add Condition" under the Hidden section and define the condition.

    Thumbnail

    Tip

    It is always recommended to implement loading and disable state to provide feedback to users. You can use data pills in your condition and write complex formulas like you would write in Excel.

Define Permissions

Every component allows you to set visibility permissions based on the permissions granted to the logged-in user. This ensures that only authorized users can view or interact with the button. 

Thumbnail

Refer

You can refer to the Permissions article for the same.