Form-footer action bar — Cancel link + Submit button, right-aligned.

Replaces the repeated boilerplate:

<div class="flex justify-end gap-3">
  <.link navigate={cancel_path} class="btn btn-ghost">Cancel</.link>
  <button type="submit" class="btn btn-primary" phx-disable-with="Saving…">
    {submit_label}
  </button>
</div>

with a single component call.

Cancelling

There are three ways to render Cancel, and exactly one is used per call — precedence is :cancel slot → cancel_click → cancel_to. An explicit order matters here: without it a form supplying two would render two Cancels, or one dead one.

cancel_to was required: true, which meant a form inside a LiveComponent — where cancelling is a phx-click with a phx-target, not a navigation — could not use this component at all and hand-rolled the whole footer.

<.form_actions cancel_to={~p"/admin/things"} submit_label="Save" />
<.form_actions cancel_click="close" cancel_target={@myself} submit_label="Save" />

<.form_actions submit_label="Save">
  <:cancel>
    <button type="button" phx-click={JS.exec("data-cancel", to: "#dialog")}>Discard</button>
  </:cancel>
</.form_actions>

Attributes

• cancel_to — Path the Cancel link navigates to.
• submit_label — Text on the submit button (e.g. "Save", "Create Endpoint"). Required.
• submitting_label — phx-disable-with text shown while the form is submitting. Defaults to "Saving…" (gettext-translated).
• submit_icon — Optional Heroicon name rendered inside the submit button (e.g. "hero-check").
• submit_class — Class for the submit button. Default "btn btn-primary".
• class — Extra classes appended to the outer wrapper.

Slots

• inner_block — Optional extra controls rendered BEFORE Cancel + Submit (e.g. a secondary "Save and Return" button).

Example

<.form_actions
  cancel_to={Paths.endpoints()}
  submit_label={if @endpoint, do: gettext("Update"), else: gettext("Create")}
  submit_icon="hero-check"
/>