useFormButtons

Merges user-provided button configuration with built-in defaults, producing a complete config for submit, next, and back buttons.

You probably don’t need this directly. The <Form /> component calls it internally. Use it when building custom button rendering logic.

Signature

import { useFormButtons } from '@saastro/forms';

const { buttonConfigs } = useFormButtons(buttons, actions);

Parameters

Return Value

{
  buttonConfigs: {
    submit: ButtonConfig; // type: 'submit'
    next: ButtonConfig; // type: 'next', with action callback
    back: ButtonConfig; // type: 'back', with action callback
  }
}

Defaults

User-supplied properties override these defaults via object spread. Icons are resolved from the config when specified.

Example

import { useFormButtons } from '@saastro/forms';

function CustomButtons({ config, onNext, onBack, isLast }) {
  const { buttonConfigs } = useFormButtons(config.buttons, {
    next: { action: onNext },
    back: { action: onBack },
  });

  return (
    <div className="flex gap-2">
      <button onClick={buttonConfigs.back.action}>{buttonConfigs.back.label}</button>
      {isLast ? (
        <button type="submit">{buttonConfigs.submit.label}</button>
      ) : (
        <button onClick={buttonConfigs.next.action}>{buttonConfigs.next.label}</button>
      )}
    </div>
  );
}

Related

• Buttons — Full guide on button configuration