adverse-sapphire
adverse-sapphire•3y ago

editing usemodal form footer

i am having a custom button in antmodal footer footer={<Button >okk</Button>} if i click on this save functionality should occur how to do it?
4 Replies
Omer
Omer•3y ago
Hey @rehan1 👋 , You can use okButtonProps of modalProps. 
const {
    modalProps,
  } = useModalForm({
    action: 'edit',
});

<Modal
    {...createModalProps}
    footer={
        <Button {...modalProps.okButtonProps}>Custom Button</Button>
    }
>
const {
    modalProps,
  } = useModalForm({
    action: 'edit',
});

<Modal
    {...createModalProps}
    footer={
        <Button {...modalProps.okButtonProps}>Custom Button</Button>
    }
>
adverse-sapphire
adverse-sapphireOP•3y ago
<Modal footer={ <Button {...modalProps.cancelButtonProps}>Custom Button</Button> } className="modal-create-appointment" {...modalProps}> modal not getting closed?
Omer
Omer•3y ago
https://stackblitz.com/edit/pankod-refine-3ebrsu?file=src%2Fpages%2Fposts%2Flist.tsx%3AL96 You can use close function of useModalForm 
const {
    modalProps,
    close,
  } = useModalForm({
    action: 'edit',
});

<Button onClick={close}>Custom Close Button</Button>
const {
    modalProps,
    close,
  } = useModalForm({
    action: 'edit',
});

<Button onClick={close}>Custom Close Button</Button>
adverse-sapphire
adverse-sapphireOP•3y ago
thank you it worked

Did you find this page helpful?