Interface element: Button
  • 28 Oct 2022
  • 4 Minutes to read
  • Dark
    Light

Interface element: Button

  • Dark
    Light

The Button element allows collaborators who are interacting within an interface to perform an action or set of actions at the click of a button. This feature works very well with the "Record review" and "Record summary" interface layout templates. If you are building an interface from scratch, then many of the button actions work with the record list element.


Introduction

Plan availabilityAll plan types/levels
Permissions

Please consult this support article for a breakdown of Interface Designer permissions.

Platform(s)Web/Browser, Mac app, and Windows app
Related reading


Adding and configuring button elements

  1. If this is the first time you've added elements to an interface, please consult this help article first.
  2. Find the Button element by clicking + Add element in the lower left portion of the interface editor.
  3. You'll then place the element somewhere in the layout of your interface page. Don't worry if it isn't in perfect positioning yet, as you can always move the element later.
  4. Next up, you'll need to configure the button's properties so that it performs and looks the way you want it to. This includes properties related to "Button actions" and "Appearance."


Button actions

On the right side of the page, you'll see a dropdown menu to pick which type of action the button will perform when a user clicks it. 

A button element can perform the action types listed below. The first 5 action types require a record picker or record list element to be used. The last 3 action types listed below don't require a connected element.

  1. Update record - Configure a button to perform single or multiple updates to a record. One example would be to quickly update a record's status with the click of a button. You can also set the button to automatically move to the next record once it is clicked.
  2. Copy link to record - Depending upon the current record being reviewed/summarized, this action will copy a direct link to that record in the interface page currently opened.
  3. Delete record - A button to quickly delete a record opened from the chosen source. As always, users can press CMD Z to quickly undo an accidental deletion. Editors and creators with access to the underlying base can also access the base trash to restore deleted records.
  4. Go to previous/next record - Add a button to help users simply navigate to the next or previous record.
  5. Go to URL in record - By connecting the button to a particular URL field, it creates the ability to have a dynamic button that will navigate to the URL in the particular record that is currently open. You can also choose whether or not to open that URL in a new browser tab.
  6. Go to interface page - This allows you to add a convenient button that links to another interface page in this interface. You can also choose whether or not to open that interface page in a new browser tab.
  7. Go to external URL - Add a link to another website, another interface, an Airtable base, and more. You can also choose whether or not to open that external URL in a new browser tab.
  8. Run automation - Choose a previously configured automation to trigger when the button is pressed. You can also start creating a new automation right in the interface. After naming the automation you can click Continue to start building the automation in a new browser tab. There are two requirements in order to set up this button element action:
    1. Either a record picker element or a record review layout (containing the record list element) must be present on the interface page where the button element resides to use as a source.
    2. For an automation to be used with the button element, it must include the When a button is clicked automation trigger. Read more about the setup process here.


Appearance

Before moving on to further interface configuration or publishing your interface, you may want to rename/label the button or change its color to provide more context to collaborators who are interacting within the interface you are building. You can also have the button update colors and/or label after the button has been clicked. 


Test the button

Lastly, it's a good idea to test the button, especially in more complex use cases, to ensure that it is performing the way you would like it to. Below you can see that pressing the "Mark project complete" button updates the checkbox field the way we intended it to.

idElementButtonMarkComplete04262022


FAQs

Are there any limits to be aware of with the button element?

Currently, you can set a button to perform a maximum of 5 actions at once. The actions performed are all or nothing. There is no "logic" that can be configured for the button.


Was this article helpful?