Drawer

The Drawer component is a modal component that can be positioned to the left, right, top or bottom of the viewport. It can be used to display additional information or actions without leaving the current screen. It renders contents similar to the Modal component and supports a header, body, fixed footer and icon.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow}> Toggle </Button> <Drawer show={show} onHide={handleClose}> <Drawer.Header closeButton renderIcon={() => ( <Drawer.Icon> <span className="icon-message-circle-02" /> </Drawer.Icon> )} title="Title" subtitle="Subtitle" /> <Drawer.Body> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </Drawer.Body> <Drawer.Footer> <Button onClick={handleClose} variant="outline-secondary"> Cancel </Button> <Button onClick={handleClose}>Save</Button> </Drawer.Footer> </Drawer> </> ); }

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

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Toggle
            </Button>

            <Drawer show={show} onHide={handleClose}>
                <Drawer.Header
                    closeButton
                    renderIcon={() => (
                        <Drawer.Icon>
                            <span className="icon-message-circle-02" />
                        </Drawer.Icon>
                    )}
                    title="Title"
                    subtitle="Subtitle"
                />
                <Drawer.Body>
                    Some text as placeholder. In real life you can have the elements you have
                    chosen. Like, text, images, lists, etc.
                </Drawer.Body>
                <Drawer.Footer>
                    <Button onClick={handleClose} variant="outline-secondary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose}>Save</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

Variations

The Drawer components allow for customization similar to Modal. The body supports the prop bordered which will render a variant of the body that places a border at the top and bottom of the body.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow}> Toggle </Button> <Drawer show={show} onHide={handleClose} placement="end"> <Drawer.Header closeButton renderIcon={() => ( <Drawer.Icon variant="danger"> <span className="icon-placeholder" /> </Drawer.Icon> )} title="Title" /> <Drawer.Body bordered> The Drawer.Body bordered prop renders a variant of the body that places a border at the top and bottom of the body. </Drawer.Body> <Drawer.Footer> <Button onClick={handleClose} variant="outline-secondary"> Cancel </Button> <Button onClick={handleClose}>Save</Button> </Drawer.Footer> </Drawer> </> ); }

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

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Toggle
            </Button>

            <Drawer show={show} onHide={handleClose} placement="end">
                <Drawer.Header
                    closeButton
                    renderIcon={() => (
                        <Drawer.Icon variant="danger">
                            <span className="icon-placeholder" />
                        </Drawer.Icon>
                    )}
                    title="Title"
                />
                <Drawer.Body bordered>
                    The Drawer.Body bordered prop renders a variant of the body that places a border
                    at the top and bottom of the body.
                </Drawer.Body>
                <Drawer.Footer>
                    <Button onClick={handleClose} variant="outline-secondary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose}>Save</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

Props

Drawer

DrawerHeader

The DrawerHeader supports a static set of props to render title, subtitle, and icon in a consistent manner. It also supports rendering children for more customization.

DrawerBody

DrawerFooter

The DrawerFooter component will automatically adjust the display of the buttons within such that they stack.