Overview

A placeholder with Call-to-Action (CTA) buttons can be added to enhance user interaction within the interface. These buttons provide quick actions like:

• Move to the next screen

• Close screen

• Go back to the previous screen

• Send payload

You can customize the appearance and functionality of these buttons by modifying:

1. Label: The text displayed on the button.

2. Icon: An optional icon to enhance the button's visual appeal.

3. Alignment: Positioning of the button within the placeholder.

4. Variant: Different styles or themes for the button, such as primary, secondary, or minimal.

​

Various Fields in Placeholder

• Container Variant: You can select the container variant which means the type of shape you want for your placeholder. There are three available options in this:

  • No Container

  • Rectangle

  • Bubble

    ​

    ​

    ​

• Title: You can add a title text that will be displayed on your placeholder button.

• Subtitle: You can add the subtitle/description for your placeholder.

• Width: In this, you can define the width of the button in percentage.

• Alignment: The button's position can be adjusted to suit the design layout and user experience:

  • Start: Aligns the button to the left.

  • Center: Aligns the button in the middle.

  • End: Aligns the button to the right.

• Select Icon: You can select the icon for your placeholder button.

  ​

  ​

  ​

• CTA Button Label: You can define the button's label based on the action it performs, such as Update, Finish, or Cancel.

  ​

  ​

  ​

  ​

  ​

• Variant: In this, you can choose the button variant. The following are the available options:

  • Primary: The main call-to-action button with the highest emphasis.

  • Secondary: A less prominent button that supports the primary action.

  • Tertiary: A low-emphasis button used for alternative actions.

  • Minimal: A subtle button with minimal styling for non-primary actions.

  • Link: A button styled as a text link for navigation or non-disruptive actions.

    ​

    ​

    ​

• Button Action: You can define the following button actions for your placeholder in this:

  • Move to next screen

  • Close screen

  • Go back to previous screen

  • Send payload

    ​

    ​

    ​

• Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as user roles, permissions, field values, or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security. 

  • Example  

    • Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High." 

    • Implementation: Visibility Condition: Ticket_Priority == 'High' 

    • Result: The "Priority Escalation" section appears only for high-priority tickets.