Button

Single button component with optional icon and link

Required Props: id, text

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`text`*required	string	Button text content	`Get Started`
`icon`	object	Icon configuration	-
`url`	object	-	-
`type`	string button \| submit \| reset	Button type attribute Default: `"button"`	-
`click`	object	-	-
`action`	object	Unified action system. Use `type: "link"` for any navigation — `href` encodes destination HTML-style: `https://...` (external), `/relative` (host routing), `ref:<pageId>[/path\|?query\|#hash]` (internal page), `#anchor` (in-page scroll), `mailto:addr?subject=…&body=…` (email), `tel:+15551234` (phone). Other types: show-hide ({ target, direction, method, group?, trigger? }), open-modal ({ anchor }), copy-to-clipboard ({ text }), download-file ({ url, filename? }), toggle-theme ({ dismissTarget?, dismissMethod? } — optional panel to hide after toggle), add-to-cart ({ quantity?, quantityField? }), toggle-cart, cart-checkout, manage-subscription, agent-send ({ field? }), set-local-storage ({ key, value }), remove-local-storage ({ key }), set-state ({ key, kind?, value }), toggle-state ({ key, kind?, values? }), clear-state ({ key }). State actions write to the central state registry — pair with a `state` condition (visibility / className gating) elsewhere on the page to react. `trigger: "load"` on a `show-hide` fires once on mount in viewer mode — use for cookie banners / popups, gate via the optional `conditions` field with a `localStorage` not-exists predicate so dismissed visitors stay un-bothered. Every action also accepts `conditions: ConditionGroup[]` (same shape as node-level visibility / page access) — honored by all triggers (click / hover / load). Condition types: url-param, form-field, connector, company, device, auth, item, localStorage, state. Examples: { "type": "link", "href": "https://example.com", "target": "_blank" }, { "type": "set-state", "key": "tab-group-1", "kind": "selection", "value": "panel-features" }, { "type": "show-hide", "target": "cookie-consent", "direction": "show", "trigger": "load", "method": "class", "conditions": [{ "logic": "all", "conditions": [{ "type": "localStorage", "key": "ph-cookie-consent", "operator": "not-exists", "value": "" }] }] }. NEVER use legacy url/click props on new content.	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	Editor metadata (displayName, ...)	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`urlTarget`	string	Link target when url is set	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`background`	object	-	-
`root`	object	-	-
`handlers`	object	Custom JS event handlers. Record<string, string> mapping a React event name (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, …; must match /^on[A-Z]/) to a JS code string evaluated as a function body with `event` in scope. Runs after any `action` on the same event. Execution is suppressed in the editor. Static export emits each entry as a native HTML event attribute (onclick="…"). Event keys in `attrs` are ignored by React — put them here instead.	-

Examples

Primary CTA Button

A primary call-to-action button with icon

{
  "canDelete": true,
  "canEditName": true,
  "text": "Get Started",
  "url": "#",
  "icon": {
    "value": "ref-icon:tb/TbUserCircle"
  },
  "className": "bg-primary text-primary-content rounded-box shadow-(--shadow-style) px-6 py-3 font-bold text-center flex justify-center items-center gap-2 w-full md:w-fit"
}

Secondary Outline Button

A secondary button with outline styling

{
  "canDelete": true,
  "canEditName": true,
  "text": "Learn More",
  "url": "#",
  "className": "bg-transparent text-primary rounded-box border border-primary px-6 py-3 font-bold text-center flex justify-center items-center gap-4 w-full md:w-fit"
}

Icon-Only Button

A button that displays only an icon

{
  "canDelete": true,
  "canEditName": true,
  "text": "Menu",
  "icon": {
    "value": "ref-icon:tb/TbMenu2",
    "only": true,
    "size": "w-6 h-6"
  },
  "className": "bg-primary text-primary-content rounded-box p-3 flex justify-center items-center w-12 h-12"
}

Submit Form Button

A button for form submissions

{
  "canDelete": true,
  "canEditName": true,
  "text": "Submit Form",
  "type": "submit",
  "icon": {
    "value": "ref-icon:tb/TbSend",
    "position": "right",
    "size": "w-5 h-5"
  },
  "className": "bg-primary text-primary-content rounded-box px-6 py-3 font-bold text-center flex justify-center items-center gap-2 w-full md:w-fit"
}