live-layerdocs
View as markdown

Button

Button elements are tappable calls-to-action. Each button carries an action — what happens when the visitor taps it. Six action kinds.

Six action kinds

ActionWhat it doesWhen to use
next_slideAdvance to the next slide in the deck orderStandard "Next" / "Continue"
prev_slideGo back to the previous slide"Back"
goto_slideJump to a specific slide by IDBranching, "Skip to summary"
open_linkOpen an external URL (configurable target)"Visit our website", "Schedule a call"
submit_formSubmit a form on this slide (or anywhere in the deck)Form steps where the agent shouldn't auto-submit
agent_intentSend a structured message to the agent so it can react in voice"Tell me more", "Show pricing", "I'm ready"

Inspector

The Button element inspector exposes:

NameTypeDescription
label*stringThe visible button text.
variant"primary" | "secondary" | "ghost"Visual treatment. primary = filled accent, secondary = outline, ghost = no border. Default: primary.
action*ButtonActionDiscriminated union — fields below depend on the kind.

The action field changes shape based on which kind you pick:

Variants

The three visual variants pull from your deck theme:

  • primary — filled with theme.colors.accent, white text.
  • secondary — outline in theme.colors.accent, accent text. Best for non-primary CTAs.
  • ghost — no border, no fill. Just text in theme.colors.text. Best for footer actions ("Maybe later").

Schema reference

Button element:

NameTypeDescription
type*"button"Discriminator
label*stringVisible text
variant"primary" | "secondary" | "ghost"Default: primary
action*ButtonAction (discriminated by kind)What happens on click

ButtonAction discriminated union:

ts
type ButtonAction =
  | { kind: "next_slide" }
  | { kind: "prev_slide" }
  | { kind: "goto_slide"; slideId: string }
  | { kind: "open_link"; url: string; target?: "_self" | "_blank" }
  | { kind: "submit_form"; formElementId: string }
  | { kind: "agent_intent"; intent: string; data?: Record<string, unknown> };