The Button component in Zapier Interfaces allows you to add interactive buttons to your pages. These buttons can be styled and can perform different actions when clicked, such as navigating to another page, opening an external URL, or triggering a Zap.

Add a button

To add a button to a page:

1. From any interface page, click the plus sign at the bottom of the page.
2. In the Add Component sidebar, click the Button component. The settings sidebar will open. 

Customize your button

In the Content tab, you can customize the button to fit your interface design and functionality:

• Change the text: click on the Button label field to edit it. 
• Button type: choose between primary (color-filled) or secondary button (colored border) types. This is based on your interface project's theme.
• Height: adjust the height of the button.
• Width: decide if the button should fill the entire width of the available space or fit the content of the button label.
• Alignment: align the button to the left, right, or center of the space.
• Color: choose the interface theme's color or a specific color for the button's text and background. You can pick a color swatch or use a Hex color code.

All changes to these settings are saved automatically. 

Button actions

The Button component can perform actions when clicked. You can select one of the actions below:

• Navigate to page: send the visitor to another page within the interface. 
• Open external URL: sends the user to an external URL. You can choose to open it in a new tab or the same tab.
• Show notification: display a notification message, such as "You've clicked the button!".
• Trigger a Zap: create a Zap that triggers when the button is clicked. This allows you to use logged-in user information, such as email and name, to perform other Zap actions.

The Show notification action can be used together with the Trigger a Zap action. This means you can initiate a Zap action, such as sending an email with information to the logged-in user, and let them know the email is sent within the interface page. Other actions can only be used on their own.

Add an action

1. On your interface page, click anywhere on an existing Button component.
2. A sidebar will open. Click the Actions tab.
3. Click Add action.
4. In the Action dropdown menu, select the action type.
5. Fill out the required fields.
6. Click Save.

Note

If you select the Trigger a Zap action, you must click Create Zap before you can complete the setting up the button action. A new page or tab will open with the Zap trigger already created, and you can set up your Zap actions.

Provide feedback and get help

Submit feature requests, provide feedback, and get help from the Interfaces team.