---
title: "Button widgets"
slug: "button-widgets"
tags: ["Widget", "Expressions", "Expression Editor", "Triggers", "Priority 1"]
updated: 2024-11-19T17:04:13Z
published: 2024-11-19T17:04:13Z
canonical: "support.tulip.co/button-widgets"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Button widgets

## How To Use Buttons in Apps

Button Widgets are one of the primary ways to create Triggers in your apps.

**To** **add a button in a particular step**, open the step in the Tulip App Editor and click on “Buttons” from the Toolbar.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92248235.png)

There are five options for adding buttons. Four of them have pre-defined logic associated with them.

- **Button:** This is the only option without predefined logic.  To make a **custom button**, select “Button” and follow this guide to add custom logic.
- **Previous:** The “Previous” button takes the operator to the **last step they were on**.
- **Menu:** The “Menu” button opens the menu where the **operator can add comments, pause, restart or switch the app** they are using.  The operator can **log out** of the Tulip Player or even **change the language** running on the Tulip Player from here.
- **Next**: The Next button takes the operator to the **next step in the app** flow.
- **[Complete:](https://support.tulip.co/docs/how-to-complete-an-app The “Complete” button **completes the app** that the operator is running.

## How To Add A Custom Trigger to a Button

With Button Triggers, you can run specific Actions and Transition when a button is pressed within an app.

**Note:** Button widgets cannot be inserted in a Form Step.

Here's how to add a Trigger to a button.

1- Insert a new button widget to your app by clicking the “Buttons” dropdown from the Toolbar and choosing the type of button that you would like to use.

In this example we will create a Custom Button using the first option, “Button”.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92242997.png)

2- Select the new button and press the plus icon next to "Triggers" in the Side Pane.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92243101.png)

3- Now you should see the Trigger Editor.

Name the trigger by clicking the title in the Trigger Editor.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92243387.png)

4- Next, you can set an **IF** condition - you can leave this row blank or add a condition based on your need.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92243648.png)

You can add a condition or multiple conditions by "Add new condition" button.

You can select “all” or “any” condition from the drop down menu to allow for multiple logical conditions.

5- Set an action (**THEN**) - select one of the actions from the dropdown menu. In this example we will send an SMS alert to a Tulip administrator.

Add an Action by pressing on the "Add new action" button in the “Then” section.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_192895382.png)

Select “Send SMS” from the drop down menu.

Select whom you would like to send the SMS to from the drop down “to” menu.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92244086.png)

Please note, only administrators who’ve **verified their phone number** will be available in this menu.

Select the message type from the message dropdown menu. The three options are:

- Expression,
- Static Value,
- App Info.

In case you want to send a text, select Static Value and enter the text you wish to send on the text box.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_92244204.png)

**6 (optional)-** Add a Transition so that you can complete the app or go to the next step.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20Buttons%20in%20Apps_192895621.png)

## Styling Buttons

You can edit the following properties of buttons after they are uploaded to Tulip in the Side Pane on the right side of the screen:

- Font Size
- Font Color
- Font Style
- Button Text Align
- Button Color
- Size
- Rotation
- Drop Shadow
- Border Radius
- Blinking

## Further Reading

- [How To Copy/Paste Content Within Apps And Between Apps](/r230/docs/how-to-copypaste-content-within-apps-and-between-apps)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Widgets**

**Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic.

*Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.*

**Trigger**

**Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**.

**Triggers** can contain **actions**, **transitions**, and **conditions**.

**Widget Toolbar**

The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png)

**Trigger**

**Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**.

**Triggers** can contain **actions**, **transitions**, and **conditions**.

**Actions**

**Actions**are different operations that can be executed in **Triggers. Actions**cannot move users to other apps, or other**steps.**

Many **Actions**can be added to a single **Trigger.**

*ex. Store the value of variable x to table field y, Print app step, Adjust Edge device GPIO pin.*

**Transitions**

**Transitions** are a type of logic in **triggers**. **Transitions** can move operators between steps/apps or start/stop the app.****

Only 1**Transition******can be added to a single **Trigger.**

*ex: Complete then change to X app, Next step, Previous step, Cancel app, etc.*

**Form Step**

**Form Steps**are a special type of **S****tep** that is designed specifically for data entry. They lack some of the flexibility of normal steps but can streamline app creation.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

*Form Steps have been disabled for every new **instance** in r235/LTS9.*

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)

**Action**

**Actions**are different operations that can be executed in **Triggers. Actions**cannot move users to other apps, or other**steps.**

Many **Actions**can be added to a single **Trigger.**

*ex. Store the value of variable x to table field y, Print app step, Adjust Edge device GPIO pin.*

**Expression**

A configured code snippet that returns a calculated value based on certain inputs. **Expressions**have access to all of the variables, Table Records, and any other data available to an application.

**Static Value**

**Static values**are unchanging values that can be used within Triggers. Static values can be of any **Variable**type.

**App Info**

**App Info**is a subset of the data available within an application automatically. This data can be used both in **Widgets**and**Triggers.**This includes the current date and time, the app name, the app version, the current shift, and more.