Synapse

Components Forms

Submit button

Forms submit_button

A form submit button.

Markup

Drops in as data-pb-block="submit_button".

html
<button type="submit" data-pb-block="submit_button" class="pb-submit-button" style="display:inline-block;padding:0.7rem 1.4rem;border:0;border-radius:0.5rem;background:#4f46e5;color:#fff;font-weight:600;font-size:0.9375rem;cursor:pointer;outline-offset:2px;font-family:inherit;">Submit</button>

Settings

Everything a block can be configured to do:

Bind to State
Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow
Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page
Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes
Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="submit_button" so it imports as a labelled, editable component.
Field name
The control's name maps to a collection field key — the runtime collects it on submit of the surrounding Form.
Validation
Mark it required; the collection field's type and options (e.g. email, select choices) drive server-side validation.