Introduction

The Button component is a flexible, highly interactive clickable element used to trigger actions, submit forms, or reset inputs. Designed with zero-JS static defaults in mind, it supports multiple visual variants, size scaling, and accent themes natively.

For advanced setups, buttons can be configured with loading indicator states or embedded with custom, raw JavaScript execution fields (onclick) to run custom behavior instantly without relying on a full client-side hydration payload.

Usage

You can construct and style buttons like below:

Basic Action Button

A classic primary call-to-action button, styled with solid fills or standard outline styles.

{
  "blockType": "button",
  "text": "Get Started",
  "variant": "solid",
  "colorPalette": "blue"
}

Form Submission Button

In page layouts featuring interactive form fields (such as text fields inside a Fieldset), configure the button's action type to "submit". This ensures the parent form captures the event and submits the fields correctly.

{
  "blockType": "button",
  "text": "Submit Registration",
  "buttonType": "submit",
  "variant": "solid",
  "colorPalette": "green"
}

Inline Client Script Button (Advanced)

For instant interactions like toggling overlays, smooth scrolling, or firing customized custom events without hydrating the entire page, provide a raw JavaScript snippet in the onclick field.

{
  "blockType": "button",
  "text": "Notify System",
  "variant": "outline",
  "onclick": "window.dispatchEvent(new CustomEvent('park-ui:toast:create', { detail: { title: 'Action Registered' } }))"
}

Grouped Buttons

Render multiple complementary buttons side-by-side or joined as a cohesive, contiguous segment. In the CMS page builder, nesting button blocks inside a container block (such as a Group block with attached enabled) merges their borders seamlessly.

{
  "blockType": "group",
  "attached": true,
  "children": [
    {
      "blockType": "button",
      "text": "Previous",
      "variant": "outline"
    },
    {
      "blockType": "button",
      "text": "Next",
      "variant": "outline"
    }
  ]
}

Props

Architecture Notes

• Collision Prevention: The CMS configuration field uses the key buttonType instead of type. This prevents visual page builder editors from confusing the HTML button type with the system's inner block discriminator (blockType).
• Immediate Executions: Providing scripts in onclick writes a raw event handler directly into the server-rendered HTML markup. This is extremely high-performance as the logic runs completely inline without the browser needing to download, parse, and attach JS listeners during hydration.
• Accessibilities: Standard keyboard behaviors (focusing via Tab, activating via Space or Enter) are native to the browser's base HTML button tag and require no custom ARIA handlers.