Button Field

A whole button in one field: not just a caption, but everything needed to render a link. Clicking it in the form opens a window with its settings.

What a button holds: caption, type (button, submit, reset, download), link or a resource to link to, a file for the download type, CSS classes, arbitrary attributes, and the flags open in a new window, disabled and published.

The form submits JSON, but the value is decoded on save, so the template reads it as an array — no json_decode on the way out:

<a href="{$cta.href}"
   class="{$cta.classes}"
   {if $cta.target_blank}target="_blank"{/if}>{$cta.caption}</a>

There is also a modifier that assembles the whole element — an <a> for the download type, a <button> for the rest:

{$cta|button}

It is safe on a field that was never filled in: an empty value renders nothing instead of erroring. An unpublished button renders nothing either.

A resource is stored as the address it had when you picked it

The resource picker saves the page's URI into the value, not a reference to the page. Move the page or change its alias afterwards and the button keeps the old address, exactly as a hand-typed link would.

Note also that {$cta.href} and {$cta|button} read the link only. A button built from a picked resource keeps that address under its own key:

<a href="/{$cta.href ?: $cta.resource}">{$cta.caption}</a>