Default
The default modal footer, which contains a primary and secondary call-to-action.
import React, { useState } from 'react';
import Lorem from 'react-lorem-component';
import Button from '@atlaskit/button/standard-button';
import Modal, {
FooterComponentProps,
ModalFooter,
ModalTransition,
} from '@atlaskit/modal-dialog';
const CustomFooter = (props: FooterComponentProps) => {
return (
<ModalFooter {...props}>
<span />
<Button appearance={props.appearance} onClick={props.onClose}>
Close
</Button>
</ModalFooter>
);
};
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
const close = () => setIsOpen(false);
const open = () => setIsOpen(true);
return (
<>
<Button appearance="primary" onClick={open}>
Open modal
</Button>
<ModalTransition>
{isOpen && (
<Modal
components={{
Footer: CustomFooter,
}}
onClose={close}
heading="Modal title"
>
<Lorem count={2} />
</Modal>
)}
</ModalTransition>
</>
);
}Customization
Use the Footer component override to customize the modal footer.
import React, { useState } from 'react';
import Lorem from 'react-lorem-component';
import Button from '@atlaskit/button/standard-button';
import { N30 } from '@atlaskit/theme/colors';
import Modal, {
FooterComponentProps,
ModalFooter,
ModalTransition,
} from '@atlaskit/modal-dialog';
const CustomFooter = (props: FooterComponentProps) => {
return (
<ModalFooter
style={{
padding: 24,
backgroundColor: N30,
}}
>
<span />
<Button appearance={props.appearance} onClick={props.onClose}>
Close
</Button>
</ModalFooter>
);
};
export default function Example() {
const [isOpen, setIsOpen] = useState(false);
const close = () => setIsOpen(false);
const open = () => setIsOpen(true);
return (
<>
<Button appearance="primary" onClick={open}>
Open modal
</Button>
<ModalTransition>
{isOpen && (
<Modal
components={{
Footer: CustomFooter,
}}
onClose={close}
heading="Modal title"
>
<Lorem count={10} />
</Modal>
)}
</ModalTransition>
</>
);
}