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 (replaces legacy click/url). All link types: link-url ({ url, target }), link-page ({ pageId, target }), scroll-to ({ anchor }), email ({ email, subject?, body? }), phone ({ phone }), copy-to-clipboard ({ text }), download-file ({ url, filename? }). Button-only types: show-hide ({ target, direction, method, group?, trigger? }), open-modal ({ anchor }), toggle-theme ({ dismissTarget?, dismissMethod? } — optional panel to hide after toggle, e.g. mobile nav). Examples: { "type": "link-url", "url": "https://example.com", "target": "_blank" }, { "type": "show-hide", "target": "mobile-nav", "direction": "toggle", "method": "style" }. 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"
}