Modals

The modal template components provide a consistent look and feel for common use cases.

DeleteModal

The DeleteModal component is a modal that is used to confirm the deletion of an item. It is a wrapper around the Modal component that provides a title, content, and buttons for dismissing the modal or confirming the delete action.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Toggle</Button> <DeleteModal modalProps={{ show, onHide: () => setShow(false) }} renderTitle={() => 'Are you sure you want to delete this?'} renderContent={() => 'This action cannot be undone.'} onClickDelete={() => setShow(false)} /> </> ); }

function Example() {
    const [show, setShow] = React.useState(false);

    return (
        <>
            <Button onClick={() => setShow(true)}>Toggle</Button>

            <DeleteModal
                modalProps={{ show, onHide: () => setShow(false) }}
                renderTitle={() => 'Are you sure you want to delete this?'}
                renderContent={() => 'This action cannot be undone.'}
                onClickDelete={() => setShow(false)}
            />
        </>
    );
}

Props

FormModal

The FormModal component is a modal that is used for adding/editing information. It is a wrapper around the Modal component that provides a title, footer buttons, and a ref to the modal's Form. The component will wire up a Formik form to the modal and handle the form submission when the primary button is clicked.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Toggle</Button> <FormModal modalProps={{ show, onHide: () => setShow(false) }} formProps={{ onSubmit: (values) => { console.log(values); setShow(false); }, }} renderContent={() => ( <> <FormField> <TextField name="test" label="Text Field" /> </FormField> </> )} /> </> ); }

function Example() {
    const [show, setShow] = React.useState(false);

    return (
        <>
            <Button onClick={() => setShow(true)}>Toggle</Button>

            <FormModal
                modalProps={{ show, onHide: () => setShow(false) }}
                formProps={{
                    onSubmit: (values) => {
                        console.log(values);
                        setShow(false);
                    },
                }}
                renderContent={() => (
                    <>
                        <FormField>
                            <TextField name="test" label="Text Field" />
                        </FormField>
                    </>
                )}
            />
        </>
    );
}

Props

Layouts

LayoutModalHeader

The layout header component is used to provide a consistent layout for the header of a modal. It includes an icon, title, and close button. The icon and title can be customized using the iconVariant, iconClass, and renderTitle props. If the renderIcon prop is used it will supercede the iconVariant and iconClass props.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow(true)}>Show</Button> <Modal show={show} onHide={() => setShow(false)}> <LayoutModalHeader iconVariant="warning" iconClass="icon-placeholder" renderTitle={() => 'Awesome Title'} /> <Modal.Body>Content</Modal.Body> </Modal> </> ); }

function Example() {
    const [show, setShow] = React.useState(false);

    return (
        <>
            <Button onClick={() => setShow(true)}>Show</Button>

            <Modal show={show} onHide={() => setShow(false)}>
                <LayoutModalHeader
                    iconVariant="warning"
                    iconClass="icon-placeholder"
                    renderTitle={() => 'Awesome Title'}
                />

                <Modal.Body>Content</Modal.Body>
            </Modal>
        </>
    );
}

Props

LayoutModalFooter

The LayoutModalFooter component combines two common layouts for a modal footer: stacked and split. The stacked layout places the start and end content on separate lines, while the split layout places the start content on the left and the end content on the right. By default this layout component uses the 'responsive' variant whihc will switch between the stacked and split layouts based on the the md breakpoint.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <> <Button onClick={() => setShow('split')} className="me-3"> Show split </Button> <Button onClick={() => setShow('stacked')} className="me-3"> Show stacked </Button> <Button onClick={() => setShow('responsive')}>Show responsive</Button> <Modal show={show} onHide={() => setShow(false)} size="lg"> <Modal.Body> <div className="d-flex"> <div className="me-3"> <Modal.Icon> <span className="icon-message-circle-02" /> </Modal.Icon> </div> <div> <strong className="fs-xxl">Title</strong> <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </Modal.Body> <LayoutModalFooter variant={show} renderStart={() => ( <a href="#" className="klink"> See the best modals </a> )} renderEnd={() => ( <> <Button variant="outline-secondary" onClick={() => setShow(false)}> Cancel </Button> <Button variant="primary" onClick={() => setShow(false)}> Dismiss </Button> </> )} /> </Modal> </> ); }

function Example() {
    const [show, setShow] = React.useState(false);

    return (
        <>
            <Button onClick={() => setShow('split')} className="me-3">
                Show split
            </Button>
            <Button onClick={() => setShow('stacked')} className="me-3">
                Show stacked
            </Button>
            <Button onClick={() => setShow('responsive')}>Show responsive</Button>

            <Modal show={show} onHide={() => setShow(false)} size="lg">
                <Modal.Body>
                    <div className="d-flex">
                        <div className="me-3">
                            <Modal.Icon>
                                <span className="icon-message-circle-02" />
                            </Modal.Icon>
                        </div>
                        <div>
                            <strong className="fs-xxl">Title</strong>
                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat.
                        </div>
                    </div>
                </Modal.Body>

                <LayoutModalFooter
                    variant={show}
                    renderStart={() => (
                        <a href="#" className="klink">
                            See the best modals
                        </a>
                    )}
                    renderEnd={() => (
                        <>
                            <Button variant="outline-secondary" onClick={() => setShow(false)}>
                                Cancel
                            </Button>
                            <Button variant="primary" onClick={() => setShow(false)}>
                                Dismiss
                            </Button>
                        </>
                    )}
                />
            </Modal>
        </>
    );
}

Props