SubmitCancel pair

The conventional "Submit + Cancel" button pair at the bottom of a form, paired layout with the right spacing built in.

The SubmitCancel component is a paired Submit + Cancel button block, pre-arranged with the right spacing and order for desktop and mobile (Cancel on the left, Submit on the right, swapped on screens narrower than 480px to put the primary action under the user's thumb). Functionally equivalent to a Submit and a Cancel component placed side-by-side, but saves a few clicks in the designer.

It is a single-instance composite, one Save + Cancel pair per form view; the designer rejects a second drop.

Properties

PropertyDescription
submitLabel
string
default: Save
Label on the Submit (Save) button.
cancelLabel
string
default: Cancel
Label on the Cancel button.
buttonAlign
'left' | 'center' | 'right'
default: left
Horizontal alignment of the button row in the cell. Maps to justify-content on the flex row.

JavaScript recipes

Guard the save with a confirmation

f365.events.onBeforeSave(async () => {
  const ok = await f365.ui.showConfirm('Submit this form?');
  return ok; // return false to cancel the save and keep the form open
});

Toast after a successful save

f365.events.onSave((itemId) => {
  f365.ui.showToast(`Saved as item #${itemId}.`, 'success');
});

Clean up when the user cancels

f365.events.onCancel(() => {
  // Cannot prevent the close, use for cleanup only.
  window.localStorage.removeItem('draft');
});

Surface a save failure

f365.events.onSaveError((err) => {
  f365.ui.showToast('Save failed, please try again.', 'error');
  console.error(err);
});

Related articles

  • Submit button

    The form's primary action button, triggers validation, the save flow, and any onBeforeSave / onSave handlers.

  • Cancel button

    Discards unsaved changes and returns to the prior page, with a confirmation prompt if the form is dirty.