Understanding buttons

In a nutshell

Buttons are interactive CTA elements that trigger custom on-click actions like opening URLs, submitting forms, running workflows, or navigating pages. You can enable automation through functions, enhance user experience, and streamline navigation both within and cross applications, and to other accessible URLs.

Availability

Buttons can be added in pages in all plans of Creator.
Only the super admin, admins, and developers can add and manage buttons in pages.

1. Overview

Buttons in Zoho Creator are clickable UI elements used to trigger actions on Page components. They serve as action points, allowing users to interact directly with application components, execute Deluge functions, and open accessible URLs, from within a centralised dashboard. For example, the on-click action can call a Deluge function to update a form record, navigate to a Creator report to view relevant data, or open a website in a new tab.

When a button is added to a page, it is placed within a panel. You can customize the label, style, and layout of the button as well as the other elements of the panel to match your branding.

The configuration sections for a button include:

Display - A value for the label of the button that is inserted in the page.
Action - An action that can be initiated on the click of the button.
Style - The visual properties such as button type, color, margins, and so on, for the button.

Since the button is inserted as part of a panel, the above configurations are also available for the other panel elements. Check out the following pages for more details:

1.1. Usecase

In the Community Connect Hub application built to manage community outreach programs, a dashboard displays key metrics related to volunteer participation and donation drives. To encourage awareness and support, multiple buttons, each labeled for a different NGO, are added to the dashboard panel. Each button’s on click action is configured to open the respective NGO’s public website URL in a new tab. By placing these buttons prominently on the dashboard, users such as staff, donors, or volunteers can quickly access each NGO’s official site to learn more or make donations. They can also share these sites externally, all without navigating away from the app’s interface.

1.2. Navigation guide

After you've created a page in the edit mode of your application, you can find the button element on the left pane of the page builder. When Button is clicked, different layouts of a button are displayed alongside from which you can drag and drop the desired one onto the building space.

1.3. Display

When a button is added to a page, it will be inserted as part of a panel. Further, you can also add the other panel elements, text, and image to provide more user interaction and context. You can customize the display properties for the button, and for the text and image elements if they are added. The Display customizations for each panel element are listed below.

Panel Elements	Live Mode Image	Displayed Data
Button		Label - A text that will be displayed on the button. It can denote the action that the button might perform. If required, page variables can be included as labels to provide dynamic values for different users.
Other Panel Elements:
Text		Static Text - An alphanumeric text element that can communicate information. If required, page variables can be included to provide dynamic values for different users.
		Presets: Built-in Presets - You can choose from a built-in panel preset of a panel you might have saved already while creating a panel on any page within the Creator account. It will be of the same configurati on and can be modified further if necessary. Page Variables - You can choose a page variable that you might have already created in the same page to display dynamic values.
		Zoho Creator - Use the data stored in the forms of any of the Creator applications in the same account to do arithmetic operations such as: Sum - The sum value of all relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Prediction, OCR, Integration) Minimum - The minimum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time) Maximum - The maximum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time) Median - The median value of all the relevant entries made in a form field. The resultant value will be the middle value when the numbers are arranged in ascending order. If the number of entries is even, the average of the two middle values will be displayed. (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration) Average - The average value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration) Count - The count of the records entered using a form. You can either display the overall count or use a criteria to show a filtered count. This operation will not be performed based on a specific field since it only provides a count of records. Distinct Count - The count of the unique field values found in the records entered using a form. For example, say you've chosen an Office Location dropdown field while configuring a distinct count. A total of 30 records have Boston, Texas, Phoenix, and Japan (4 unique values) as the office locations repeatedly. Then, the distinct count value displayed on the panel will be 4. Note: The following fields are not supported for distinct count: Multiselect, Checkbox, Subform or subform fields, Add Notes, Section, Lookup (only when the display format is chosen as Multiselect or Checkbox). These operations provide a dynamic numeric value that will be displayed on the panel. Note: After configuring a text element with an arithmetic Zoho Creator operation, (such as Sum, Minimum, Count, etc) you can save it as a preset from within the Display section. This built-in preset can be reused with the same configuration in any other page component within the same Creator account.
		Zoho Sheet - You can use the value stored in a Zoho Sheets spreadsheet's cell to display a dynamic value on the panel. Note: Fetching values from the spreadsheet requires a connection between Zoho Creator and Zoho Sheets. You can either choose an existing connection or create a new one, while configuring the property.
		Zoho Projects - You can use data stored in Zoho Projects such as the number of tasks, bugs, or milestones to display a total count on the panel. Note: Fetching values from a project requires a connection between Zoho Creator and Zoho Projects. You can either choose an existing connection or create a new one, while configuring the property.
Image		An image can be displayed on the panel. It can be sourced from: My library - Images from your local storage. They can be of the formats JPEG, JPG, PNG, and a maximum of 2MB. Weblink - Images from a specified public URL. Profile picture - The logged-in user's profile picture is fetched from their Zoho Account and displayed on the panel. Note: In the following cases, a placeholder image () will be displayed instead of their profile picture: When public users or portal users access the page When the page is exported as a PDF Icons - The built-in icons provided by Creator. They can either be outlined icons or solid icons.

1.4. Action

You can associate an action to a button, or the panel as a whole, other panel elements if added, and panel containers (holds panel elements together), which will be triggered when they are clicked on. The action types that can be linked to them are:

Open URL - A public or private URL that the user might have access to, can be opened in the same window, a new window, or as a popup.

Note: The permalink of published components present in a Creator application can also be specified for this action.

Open Form - A form from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Open Report - A report from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Open Page - A page from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Execute Function - A function from any of the applications in your Creator account can be triggered.

1.5. Style

You can customize the style properties of the button, its panel, the panel containers (created when multiple buttons or additional panel elements are added), and any other panel elements. The following table lists the styling properties for the button, panel, and panel container.

Button

Corner radius - The outline of the button can be customized to be sharp or have rounded edges by adjusting its corner radius value.
Style - The content of the button can be emboldened, italicized, underlined, and changed to upper/lower case.
Font family - A font that applies to the content present inside the button. You can choose from six different font families.
Font size - The font size of the content displayed on a button. The preset font sizes range from 12px to 40px. A custom size can be set from the range of 1 to 99 pixels.
Color - The color of the text displayed on the button and its background color.
Stroke - The outline or border of the button, which can be customized with different colors and specific thickness.
Padding - The spacing between the label or text of the button and the button's outline.
Margin - The spacing around the button element.

Panel Container (more than one panel element can be clubbed within a container)
Panel (as a whole)

You can define the various properties of the panel container and the panel as a whole, including:
Column align - The panel elements housed within a panel/panel container can be aligned to different positions such as Top, Bottom left, Center, etc.
Swap - The panel containers that are situated right beside each other can be interchanged.
Height - The height of a panel container can be chosen to Fill or to any custom height in pixels.
Padding - The space between a panel element and its border can be customized in pixel values.
Background color - The color that runs through the background of the panel/panel container.
Background image - The image that runs through the background of the panel/panel container.

The text and image panel element can be added to the panel that has the button element, for more interaction. The table below lists the style properties for them.

Text

Font family - A font that applies to the content present inside the text element. You can choose from six different font families.
Style - The content of the panel element can be emboldened, italicized, underlined, and changed to upper/lower case.
Color - The color of the text and the background color of the panel element
Font size - The font size that will run throughout the content of the panel element. The preset font sizes range from 12px to 40px.
Margin - The spacing between two panel elements.
Prefix - You can attach a prefix to a dynamic value in the panel element. For example, if you want to display the number of pending tasks, the prefix can be "Count:" to display the dynamic count as a label-value pair.
Suffix - You can attach a suffix to a dynamic value in the panel element. For example, if a panel displays the count of children present in a class, the suffix can be "students".

Image

Shape - The shape of the image can be a circle, square, or a square with rounded edges.
Shape size - The shape size can be small, medium, large, or a custom size.
Icon size - If the image is chosen to be an icon, its size can be selected from a preset range of 12px to 40px. A custom size can be set from the range of 1 to 99 pixels.
Color - The color of the icon can be chosen.
Margin - The spacing between two panel elements.

2. Related topics

What's next

Learn how to add and manage buttons as clickable UI page elements on dashboards.

Learn about snippets that let you add custom UI elements using HTML, ZML, or Deluge, and embed videos, URLs, or interactive content into dashboards.

Understanding buttons | Zoho Creator Help