---
title: "Make a guide button Primary or Secondary"
slug: "/help/demos/edit/guides/button-styles"
tags: ["guides","buttons","styling","modals","tooltips"]
topic: "edit/guides"
description: "When a guide step has more than one button, make one the clear main action and give the others a quieter outline style."
product: "demos"
sidebar_label: "Primary and Secondary buttons"
last_updated: "2026-10-29T09:34:44.761Z"
---

## Overview

When a guide step has more than one button, you can now make one the clear main action and give the others a quieter look. Before, every button on a step had the same filled style, so viewers had no cue about which one to click.

### Snapshot 📸

- **Feature status:** Generally available
- **Role access:** Anyone who can edit the template
- **Location:** Template editor → a guide step → click a button → **palette icon** in the button's toolbar

---

## The two styles

- **Primary:** the filled button in your guide accent color. This is how every button looked before.
- **Secondary:** an outline in your accent color, with the same shape and font as the Primary button.

The accent color comes from your guide **Style** settings. See [Create guided demos](/help/demos/edit/guides/guided-demos).

## Change a button's style

1. Open the template in the editor and go to the guide step.
2. Click the button you want to change.
3. In the button's toolbar, click the **palette icon**.
4. Choose **Primary** or **Secondary**.

A typical setup is a Primary **Next** button with a Secondary **Back**, **Skip** or **Book a meeting** button beside it.

## Good to know

- **Nothing changes until you pick a style.** Existing buttons stay Primary.
- **AI Mode keeps the style.** If AI Mode rewrites a button's text, the button keeps the style you chose.

## Related resources

- [Create guided demos](/help/demos/edit/guides/guided-demos)
- [Restart demos from guide steps](/help/demos/edit/guides/restart-from-guide)