DesignUI elements

Button elements

View as Markdown

Add a button to create a one-click interaction in a workbook or application. You can customize the button display with text and icons, and configure it to trigger actions that kick off workflows, navigate to a specific destination, modify or refresh elements, export data, call APIs, and more.

Buttons are a UI element, allowing you to stylize workbooks and create seamless interactive experiences.

This document explains how to create and customize a button element. For information about actions and action sequences that can execute when the button is clicked, see Action effects.

User requirements

The ability to create and customize a button element requires the following:

  • You must be assigned an account type with the Full explore or Create, edit, and publish workbooks permission enabled.
  • You must be the workbook owner or be granted Can explore or Can edit access to the workbook.

Add a button element

Add a Button element to your workbook.

  1. Open a draft, custom view, or saved view of a workbook.

  2. In the Add element bar, hover over UI and select Button.

    An image of the Add element bar with the UI > Button option highlighted for selection

Customize button properties

You can customize the element properties that define the button’s appearance, including the label, style, alignment, shape, and size.

In the editor panel, select the Properties tab, then configure the following settings for the button:

OptionsDetails
Button typeSelect a button type variant from among Text, Icon, or Text and icon.
AppearanceSelect a button variant from among Filled, Outline, and Text.
TextAdd a label to display in the button. Select = on your keyboard to include a dynamic value defined by a formula expression. Available when Button type is set to Text or Text and icon.
StyleCustomize the font weight, text color, and button color.
HorizontalAlign or stretch the button relative to the total element width.
VerticalAlign the button relative to the total element height.
ShapeSelect a button shape from among Auto, Square, Round, and Pill.
SizeSelect a button size from among Small, Medium, and Large.
IconSelect an icon to appear in the button. Available when Button type is set to Icon or Text and icon.
TooltipTurn on the toggle to enable custom on-hover text for the button. Available when Button type is set to Icon.
PositionSelect Start or End to set the position of the icon relative to the text. Available when Button type is set to Text and icon.

You can search for icons that fit your design needs. After selecting Change icon in the Properties tab, you can search for an icon by its name using the search bar. Additionally, you can search by category by selecting between All, Filled, Outlined, Toned, and Emoji.

Configure button actions

Configure actions and action sequences that execute when the button is clicked.

  1. In the editor panel, select the Actions tab.

  2. Configure actions and action sequences as needed. For information about specific action effects and how to configure them, see Action effects and the documentation linked in the table.