Skip to content
  1. Extras
  2. PageBuilder
  3. Field types
  4. Free
  5. button

Field button

Version: Free.

Why this type

Three related props in one field. UTM placeholders in url. Ready object for <a> in chunk.

When to use

  • Primary hero or CTA button
  • Secondary link with target _blank
  • Label plus link without two fields

Tips

URL-only fits url. Multiple buttons use repeater with nested button or text+url.

Similar types

  • url for bare href
  • text + url for split layout control

Schema

json
{
  "name": "cta",
  "type": "button",
  "label": "Button",
  "tab": "Content",
  "width": 100,
  "active": true
}

Value

Object { label, url, target }.

Section data

Key cta in the section data:

json
{
  "cta": {
    "label": "Learn more",
    "url": "https://example.com",
    "target": "_blank"
  }
}

Chunk example

html
<a class="btn" href="{$cta.url|escape}" target="{$cta.target|escape}">{$cta.label|escape}</a>

Common properties

For fields with name that are stored in the section data:

KeyTypeRoleCMP
tabstringGroup subtitle in the inspectoryes
width25–100Field width as % of the row (flex)yes
descriptionstringHint under the labelyes
defaultanyInitial value for a new sectionyes
activeboolfalse hides the field in the inspectoryes
requiredboolRequired on publish (draft still saves)yes
  • Also: UTM placeholders in url.

See fields overview.

See also