NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Modal

import Modal from '@concur/nui-widgets/lib/Modal/Modal';

Modals act as dialog boxes overlaid on top of the page. This allows the user to focus on specific content before returning to the underlying application page.

Modals consist of a header component (with or without a close box), a title component, a body component, and a footer component (plus an optional subheading component below the title).

Examples

Sizes

There are three supported modal sizes: 'lg' (default), 'md', and 'sm'. Use the size property to set the size.

const HIGModalEx01 = () => {
    let [openLg, setOpenLg] = useState(false);
    let [openMd, setOpenMd] = useState(false);
    let [openSm, setOpenSm] = useState(false);

    return (
        <>
            <ButtonToolbar muted>
                <Button onClick={() => setOpenLg(true)}>Large Modal</Button>
                <Button onClick={() => setOpenMd(true)}>Medium Modal</Button>
                <Button onClick={() => setOpenSm(true)}>Small Modal</Button>
            </ButtonToolbar>

            <Modal
                onHide={() => setOpenLg(false)}
                show={openLg}>
                <Modal.Header closeButton closeLabel='Close'>
                    <Modal.Title>Sample Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Sample modal content.
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => setOpenLg(false)}>Close</Button>
                </Modal.Footer>
            </Modal>

            <Modal
                onHide={() => setOpenMd(false)}
                show={openMd}
                size='md'>
                <Modal.Header closeButton closeLabel='Close'>
                    <Modal.Title>Sample Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Sample modal content.
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => setOpenMd(false)}>Close</Button>
                </Modal.Footer>
            </Modal>

            <Modal
                onHide={() => setOpenSm(false)}
                show={openSm}
                size='sm'>
                <Modal.Header closeButton closeLabel='Close'>
                    <Modal.Title>Sample Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Sample modal content.
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => setOpenSm(false)}>Close</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

With Subhead

The Modal.Subhead component provides a way to add additional details to the modal header.

const HIGModalEx02 = () => {

    let [open, setOpen] = useState(false);

    return (
        <>
            <ButtonToolbar muted>
                <Button onClick={() => setOpen(true)}>Show Modal w/ Subhead</Button>
            </ButtonToolbar>

            <Modal
                onHide={() => setOpen(false)}
                show={open}>
                <Modal.Header closeButton closeLabel='Close'>
                    <Modal.Title>Sample Title with Subhead</Modal.Title>
                    <Modal.Subhead>
                        <ul className='list-inline cnqr-separated'>
                            <li>Some information</li>
                            <li>More information</li>
                        </ul>
                    </Modal.Subhead>
                </Modal.Header>
                <Modal.Body>
                    Sample modal content.
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => setOpen(false)}>Close</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

Full-Screen Modals

Full-screen modals will size themselves to the dimensions of the browser window, obscuring all underlying content.

const HIGModalEx03 = () => {
    let [open, setOpen] = useState(false);

    return (
        <>
            <ButtonToolbar muted>
                <Button onClick={() => setOpen(true)}>Show Fullscreen Modal</Button>
            </ButtonToolbar>

            <Modal
                fullscreen
                onHide={() => setOpen(false)}
                show={open}>
                <Modal.Header closeButton closeLabel='Close'>
                    <Modal.Title>Sample Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Sample modal content.
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => setOpen(false)}>Close</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

Usage

Properties

Property Type Default Description
className String   Custom classes to add to the modal’s outermost <div> tag.
containerClassName String   Custom classes applied to the modal container (<body> by default) when the modal is open, and removed when it is closed.
fullscreen Boolean false When true, the modal will take up the entire browser window, obscuring all underlying content.
modalContainerClassName String   Custom classes to add to the modal content’s outermost <div> tag.
show Boolean false Controls whether the modal is visible.
size String 'lg' Size of the modal. Options are 'lg', 'md', 'sm'.

Callbacks

Property Parameters Description
onHide   Fired when the modal is dismissed.
onShow   Fired when the modal is activated.

Modal.Header

Properties

Property Type Default Description
closeLabel String 'Close' Provides an accessible label for the close button. Required when closeButton is true
closeButton Boolean false If true, the modal will display a close button.

Modal.Title

Properties

Property Type Default Description
className String   Custom classes to add to the heading tag.
headingLevel Number (2-6) 2 Heading level. 1 is reserved for the page title.

Modal.Subhead

Properties

Property Type Default Description
className String   Custom classes to add to the sub heading <div> tag.

Modal.Body

Properties

Property Type Default Description
className String   Custom classes to add to the body’s <div> tag.

Modal.Footer

Properties

Property Type Default Description
className String   Custom classes to add to the footer’s <div> tag.