Filled / outlined CTA. Renders as <button (or <a when the action implies navigation). Supports an optional inline icon and a typed action prop covering navigation, modal toggling, cart, theme, and custom JS.
Filled / outlined CTA. Renders as <button> (or <a> when the action implies navigation). Supports an optional inline icon and a typed action prop covering navigation, modal toggling, cart, theme, and custom JS.
Button renders only its text and optional icon — child nodes in block JSON are ignored. For clickable wrappers around arbitrary children, use Container with an action prop instead.
| Prop | Type | Notes |
|---|---|---|
text | string | Required. Interpolated against current item context ({{item.*}}). |
icon | { value, only?, position?, size?, color? } | value is ref-icon:<set>/<ExportName> or ref-image:<mediaId>. only: true hides text. |
action | object | See actions-and-handlers. Types: link, open-modal, show-hide, toggle-theme, copy-to-clipboard, download-file, add-to-cart, toggle-cart, cart-checkout, manage-subscription, agent-send. |
attrs | record | Pass-through DOM attrs (data-*, role, aria-*). String values interpolate {{item.*}}. |
handlers | Record<EventName, string> | Custom JS event handlers (onClick, onMouseEnter, …) compiled as new Function("event", code). Runs after action. Editor-suppressed. |
className, root | — | Canonical CTA: btn btn-primary cta-responsive rounded-box px-space-md py-space-xs min-h-12 font-semibold. |
btn chrome (filled / outlined CTAs).mailto:/tel:. Link only supports the navigational link action.Button.icon so the pair is atomic.text is a string, not HTML. Use Tiptap-style spans (<span data-variable="item.title" class="variable-node">{{item.title}}</span>) for interpolation in Text, but for Button just write {{item.title}} bare in text.Container if you need them.max-w-full whitespace-normal text-xs sm:text-sm to wrap on mobile (btn defaults to nowrap).Primary ≈ Base 100, btn btn-primary is invisible — use explicit bg-* text-* px-* py-* instead.