Button building block

Last updated: March 20, 2026 18:09

A button building block lets you add interactive buttons to a guide so visitors can take an action, such as moving to the next step, dismissing a guide, or opening a link. Buttons help guide visitors through workflows, prompt them to complete tasks, or direct them to additional information.

You can customize the button’s text, appearance, and behavior, and control how it interacts with the rest of the guide. Buttons can also be placed next to other building blocks, such as text or images, to create clear and structured guide layouts.

For an overview of all building blocks, see Guide building blocks.

Prerequisites

To add a building block to a guide, you must have permission to create or edit guides.

Add a button

To add a button to a guide:

Go to Guides.
From the table, open the guide you want to edit.
Select Edit in my app to open the Visual Design Studio.

Launch VDS.png

Select View steps, then choose the step you want to edit.

View steps.png

Select Edit step.

For a new guide step that is blank: Select Click to add content, then choose Button as the building block type.
For an existing guide step that already has content: Select the step, then hover above or below the block and select the Add row (+) icon that appears, or hover to the left or right of a block and select the Add column (+) icon. Then choose Button as the building block.

Button building blocks

When you add a button building block to your guide, the Edit Button window allows you to edit the button text, style, actions, spacing, and ARIA name. The button's design, text, and actions are applied to each button individually.

With button building blocks, you can also:

Add up to four buttons in a row in your guide step. You can also add a text block or an image next to a button in a guide step. For more information, see Button layout in this article.
Edit the margins of your button building block. If you choose Custom as your Button Style for the guide, you can also edit the padding of the button building block. For more information, see Custom Button spacing in this article.

Button layout

You can add up to four buttons in a row in your guide. You can also add a text building block or an image building block next to a button in a guide step. To add a button, image, or text building block next to an existing button, hover over the existing button and select the blue plus (+) icon that appears to the left or right of the button.

You can also edit the alignment of your button. Hover over an existing button and select the alignment icon in the toolbar that appears.

This opens the Edit Row window, where you can edit:

Background color
Spacing (padding and margins) around the row.
Horizontal alignment (stacked) of the button relative to any other building blocks in the row.
Vertical alignment of the button (top, center, or bottom of the row).

Select Done in the bottom-right of the Edit Row window when you're done editing spacing and alignment.

To change the order of multiple buttons in a row, hover over one of the buttons and select the left or right arrow to move it along the row.

Button style

You have the following options for editing the style of a button building block: Custom, Primary Button, Secondary Button, and Tertiary Button.

Button style.png

With the exception of Custom, button styles are determined by guide theme, which is set by an admin user. Custom overrides the guide theme and thus provides more button styling options.

Button text

We recommend keeping your button text short and direct.

To edit button text, select the existing entry under Behavior and enter new text to replace it. If you choose Custom as your button style, you can also specify a button width. For more information, see Custom button appearance in this article.

Edit button.png

Button actions

Guide button actions define what happens when a visitor selects the button, such as Next Step or Dismiss Guide.

Some button actions can be paired to make a compound action when the button is selected. For example, Dismiss Guide can be paired with URL Link to close the guide and then take the visitor to a new page when they select the button.

Button action.png

Custom button text style

There are more style options available to you if you choose Custom as your button style. Expand the Styles section of the Edit Button window to reveal the following dropdown menus:

Family. Allows you to choose a different button text font.
Weight. Allows you to set the baseline boldness of the button's text.
Size. Allows you to choose the size of the button's text font.
Color. Allows you to choose a different color for the button's text font, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
Text Transform. Allows you to transform the capitalization of the button's text:

Choose capitalize to make every first letter of a word uppercase.

Choose uppercase to make every letter uppercase.

Choose lowercase to make every letter lowercase.

Letter spacing. Allows you to edit the spacing in pixels (px) between the letters of the button text.

Button font.png

Custom button spacing

Expand the Styles section of the Edit Button window to edit the margins around your button. Margins control the space outside your button, and padding controls the space within your button. You can only edit Padding if you choose Custom as your button style.

Edit button padding

If you choose Custom as your button style, you can edit the padding around the text in your button.

Margins control the space between the button and the surrounding layout.. You edit the top, right, bottom, and left margins independently.

Custom button appearance

There are more button colors available to you if you choose Custom as your button style. Expand the Styles section of the Edit Button window to reveal the following additional options:

Background

Color. Allows you to change the button's background color and transparency, set with a hexadecimal, RGBA values, visual color selector, or color and transparency sliders.

Border

Color. Allows you to choose a different color for the button's border, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
Width. Allows you to set the thickness of the button's border in pixels (px).
Radius. Allows you to set the roundness of the button's corners in pixels ( px ).

Width

Choose Auto if you want the button to automatically resize to accommodate the text in the button until it reaches the width of the container.
Choose Fixed to specify a button width in pixels (px). The text breaks and forms a new line when it reaches the specified button width.

Button apperance.png

Custom button hover styles

You can change the style of a button's hover state if you choose Custom as your button style. Expand the Hover Styles section of the Edit Button window to reveal the following additional options:

Text

Color. Allows you to choose a different color for the button's hover text font, set with a hexadecimal, RGB numbers, visual color selector, or color slider.
Weight. Allows you to set the boldness of the button's hover text.