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

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, Scrolling, and Tooltips

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.

This example also shows using the scrollable prop on the body to allow for scrolling within the body.

❗Tooltips need to be attached to a container outside of the Drawer.Body. Here the Tooltip on the Select label is attached to the Drawer.Header.

Result

Live Editor

function Example() { const [show, setShow] = useState(false); const [isSlidden, setIsSlidden] = useState(false); const drawerHeaderRef = useRef(null); 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" ref={drawerHeaderRef} /> <Drawer.Body bordered scrollable> <Form footerRenderer={() => null}> <FormField> <Select name="select" label={ <div className="d-flex"> <span>Label</span> <Tooltip title="I am a tooltip" container={() => drawerHeaderRef.current} > <span className="ms-3 icon-help-circle" /> </Tooltip> </div> } > <Item key="one">One</Item> <Item key="two">Two</Item> <Item key="three">Three</Item> </Select> </FormField> {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => ( <FormField key={i}> <TextField name={`text${i}`} label={ <Label renderAction={() => ( <Button variant="link" className="p-0" onClick={() => setIsSlidden(true)} > Show more </Button> )} > Field {i} </Label> } /> </FormField> ))} </Form> <Drawer.Slide show={isSlidden} onClickBack={() => setIsSlidden(false)}> <p>More stuff related to Field 1</p> <p>This could be additional fields, supplemental info, etc.</p> {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => ( <TextField key={`slide-${i}`} name={`text${i}`} label="Text Field" /> ))} <p>This could be additional fields, supplemental info, etc.</p> </Drawer.Slide> </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 [isSlidden, setIsSlidden] = useState(false);
    const drawerHeaderRef = useRef(null);

    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"
                    ref={drawerHeaderRef}
                />
                <Drawer.Body bordered scrollable>
                    <Form footerRenderer={() => null}>
                        <FormField>
                            <Select
                                name="select"
                                label={
                                    <div className="d-flex">
                                        <span>Label</span>
                                        <Tooltip
                                            title="I am a tooltip"
                                            container={() => drawerHeaderRef.current}
                                        >
                                            <span className="ms-3 icon-help-circle" />
                                        </Tooltip>
                                    </div>
                                }
                            >
                                <Item key="one">One</Item>
                                <Item key="two">Two</Item>
                                <Item key="three">Three</Item>
                            </Select>
                        </FormField>

                        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => (
                            <FormField key={i}>
                                <TextField
                                    name={`text${i}`}
                                    label={
                                        <Label
                                            renderAction={() => (
                                                <Button
                                                    variant="link"
                                                    className="p-0"
                                                    onClick={() => setIsSlidden(true)}
                                                >
                                                    Show more
                                                </Button>
                                            )}
                                        >
                                            Field {i}
                                        </Label>
                                    }
                                />
                            </FormField>
                        ))}
                    </Form>

                    <Drawer.Slide show={isSlidden} onClickBack={() => setIsSlidden(false)}>
                        <p>More stuff related to Field 1</p>
                        <p>This could be additional fields, supplemental info, etc.</p>

                        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((i) => (
                            <TextField key={`slide-${i}`} name={`text${i}`} label="Text Field" />
                        ))}

                        <p>This could be additional fields, supplemental info, etc.</p>
                    </Drawer.Slide>
                </Drawer.Body>
                <Drawer.Footer>
                    <Button onClick={handleClose} variant="outline-secondary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose}>Save</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

Sizes

The size of the Drawer can be customized. However, all Drawers will be full screen below the medium breakpoint.

Result

Live Editor

function Example({ size }) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow} className="mb-2"> Toggle {size} </Button> <Drawer show={show} onHide={handleClose} size={size}> <Drawer.Header title={size} /> <Drawer.Body bordered> Body </Drawer.Body> <Drawer.Footer> <Button onClick={handleClose} variant="outline-secondary"> Cancel </Button> <Button onClick={handleClose}>Save</Button> </Drawer.Footer> </Drawer> </> ); } render((['sm', 'md', 'lg', 'xl']).map((size) => <Example size={size}/>));

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

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

    return (
        <>
            <Button variant="primary" onClick={handleShow} className="mb-2">
                Toggle {size}
            </Button>

            <Drawer show={show} onHide={handleClose} size={size}>
                <Drawer.Header title={size} />
                <Drawer.Body bordered>
                    Body
                </Drawer.Body>
                <Drawer.Footer>
                    <Button onClick={handleClose} variant="outline-secondary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose}>Save</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

render((['sm', 'md', 'lg', 'xl']).map((size) => <Example size={size}/>));

Responsive Footers

Responsive footers will adjust the display order of their button children below the small breakpoint.

Result

Live Editor

function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow} className="mb-2"> Toggle </Button> <Drawer show={show} onHide={handleClose}> <Drawer.Header title="Reponsive Footer"/> <Drawer.Body bordered>Body</Drawer.Body> <Drawer.Footer responsive> <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} className="mb-2">
                Toggle
            </Button>

            <Drawer show={show} onHide={handleClose}>
                <Drawer.Header title="Reponsive Footer"/>
                <Drawer.Body bordered>Body</Drawer.Body>
                <Drawer.Footer responsive>
                    <Button onClick={handleClose} variant="outline-secondary">
                        Cancel
                    </Button>
                    <Button onClick={handleClose}>Save</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

With DrawerSlide

The DrawerSlide component lets you display additional content in a Drawer. When shown, it will slide in and cover the main content and footer of your Drawer.

Result

Live Editor

function Example() { const [show, setShow] = useState(false); const [isSlidden, setIsSlidden] = useState(false); const [isSliddenToo, setIsSliddenToo] = useState(false); return ( <> <Button onClick={() => setShow(true)}>Toggle Drawer</Button> <Drawer show={show} onHide={() => setShow(false)} placement="end"> <Drawer.Header closeButton renderIcon={() => ( <Drawer.Icon> <span className="icon-placeholder" /> </Drawer.Icon> )} title="Title" subtitle="Subtitle" /> <Drawer.Body bordered> <Form footerRenderer={() => null}> <FormField> <TextField name="text" label={ <Label renderAction={() => ( <Button variant="link" className="p-0" onClick={() => setIsSlidden(true)} > Show more </Button> )} > Field 1 </Label> } /> </FormField> <FormField> <TextField name="text" label={ <Label renderAction={() => ( <Button variant="link" className="p-0" onClick={() => setIsSliddenToo(true)} > Show more </Button> )} > Field 2 </Label> } /> </FormField> </Form> <Drawer.Slide show={isSlidden} onClickBack={() => setIsSlidden(false)}> <p>More stuff related to Field 1</p> <p>This could be additional fields, supplemental info, etc.</p> </Drawer.Slide> <Drawer.Slide show={isSliddenToo} onClickBack={() => setIsSliddenToo(false)}> <p>More stuff related to Field 2</p> <p>This could be additional fields, supplemental info, etc.</p> </Drawer.Slide> </Drawer.Body> <Drawer.Footer> <Button variant="outline-secondary" onClick={() => setShow(false)}> Cancel </Button> <Button>Submit</Button> </Drawer.Footer> </Drawer> </> ); }

function Example() {
    const [show, setShow] = useState(false);
    const [isSlidden, setIsSlidden] = useState(false);
    const [isSliddenToo, setIsSliddenToo] = useState(false);

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

            <Drawer show={show} onHide={() => setShow(false)} placement="end">
                <Drawer.Header
                    closeButton
                    renderIcon={() => (
                        <Drawer.Icon>
                            <span className="icon-placeholder" />
                        </Drawer.Icon>
                    )}
                    title="Title"
                    subtitle="Subtitle"
                />
                <Drawer.Body bordered>
                    <Form footerRenderer={() => null}>
                        <FormField>
                            <TextField
                                name="text"
                                label={
                                    <Label
                                        renderAction={() => (
                                            <Button
                                                variant="link"
                                                className="p-0"
                                                onClick={() => setIsSlidden(true)}
                                            >
                                                Show more
                                            </Button>
                                        )}
                                    >
                                        Field 1
                                    </Label>
                                }
                            />
                        </FormField>

                        <FormField>
                            <TextField
                                name="text"
                                label={
                                    <Label
                                        renderAction={() => (
                                            <Button
                                                variant="link"
                                                className="p-0"
                                                onClick={() => setIsSliddenToo(true)}
                                            >
                                                Show more
                                            </Button>
                                        )}
                                    >
                                        Field 2
                                    </Label>
                                }
                            />
                        </FormField>
                    </Form>

                    <Drawer.Slide show={isSlidden} onClickBack={() => setIsSlidden(false)}>
                        <p>More stuff related to Field 1</p>
                        <p>This could be additional fields, supplemental info, etc.</p>
                    </Drawer.Slide>

                    <Drawer.Slide show={isSliddenToo} onClickBack={() => setIsSliddenToo(false)}>
                        <p>More stuff related to Field 2</p>
                        <p>This could be additional fields, supplemental info, etc.</p>
                    </Drawer.Slide>
                </Drawer.Body>
                <Drawer.Footer>
                    <Button variant="outline-secondary" onClick={() => setShow(false)}>
                        Cancel
                    </Button>
                    <Button>Submit</Button>
                </Drawer.Footer>
            </Drawer>
        </>
    );
}

Props

Drawer

Name	Type	Default Value	Required	Description
analytics	any		No
autoFocus	boolean	true	No	When `true` The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any Modal children that have the `autoFocus` prop. Generally this should never be set to `false` as it makes the Modal less accessible to assistive technologies, like screen readers.
backdrop	boolean | "static"		No	Include a backdrop component. A `static`backdrop will not trigger a Modal onHide when clicked.
backdropClassName	string		No
bsPrefix	string		No
className	string		No
container	DOMContainer		No	A DOM element, a `ref` to an element, or function that returns either. The Modal is appended to it's `container` element.
enforceFocus	boolean	true	No	When `true` The modal will prevent focus from leaving the Modal while open. Generally this should never be set to `false` as it makes the Modal less accessible to assistive technologies, like screen readers.
key	Key		No
keyboard	boolean		No	Close the modal when escape key is pressed
manager	ModalManager		No	A ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container
onBackdropClick	(e: React.SyntheticEvent) => void		No	A callback fired when the backdrop, if specified, is clicked.
onEnter	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired before the component transitions in
onEntered	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired after the component finishes transitioning in
onEntering	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired as the component begins to transition in
onEscapeKeyDown	(e: KeyboardEvent) => void		No	A callback fired when the escape key, if specified in `keyboard`, is pressed. If preventDefault() is called on the keyboard event, closing the modal will be cancelled.
onExit	(node: HTMLElement) => any		No	Callback fired right before the component transitions out
onExited	(node: HTMLElement) => any		No	Callback fired after the component finishes transitioning out
onExiting	(node: HTMLElement) => any		No	Callback fired as the component begins to transition out
onHide	() => void		No	A callback fired when either the backdrop is clicked, or the escape key is pressed. The `onHide` callback only signals intent from the Modal, you must actually set the `show` prop to `false` for the Modal to close.
onShow	() => void		No	A callback fired when the Modal is opening.
placement	OffcanvasPlacement		No
ref	Ref<HTMLDivElement>		No
renderStaticNode	boolean		No
responsive	string		No
restoreFocus	boolean	true	No	When `true` The modal will restore focus to previously focused element once modal is hidden
restoreFocusOptions	{ preventScroll: boolean; }		No	Options passed to focus function when `restoreFocus` is set to `true` @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters
runBackdropTransition	TransitionHandler		No	A transition handler, called with the `show` state and backdrop element. Should return a promise when the transition is complete
runTransition	TransitionHandler		No	A transition handler, called with the `show` state and dialog element. Should return a promise when the transition is complete
scroll	boolean		No
show	boolean		No	Set the visibility of the Modal
size	"sm" | "md" | "lg" | "xl"	sm	No
style	CSSProperties		No

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.

Name	Type	Default Value	Required	Description
bsPrefix	string		No
closeButton	boolean		No
closeLabel	string		No
closeVariant	string		No
key	Key		No
onHide	() => void		No
ref	Ref<HTMLDivElement>		No
renderIcon	() => React.ReactNode		No
subtitle	React.ReactNode		No
title	React.ReactNode		No

Name	Type	Default Value	Required	Description
about	string		No
accessKey	string		No
aria-activedescendant	string		No	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic	Booleanish		No	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete	"list" | "none" | "inline" | "both"		No	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-busy	Booleanish		No	Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked	boolean | "true" | "false" | "mixed"		No	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount	number		No	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex	number		No	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colspan	number		No	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls	string		No	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current	boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date"		No	Indicates the element that represents the current item within a container or set of related elements.
aria-describedby	string		No	Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-details	string		No	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
aria-disabled	Booleanish		No	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect	"link" | "none" | "copy" | "execute" | "move" | "popup"		No	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage	string		No	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded	Booleanish		No	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto	string		No	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed	Booleanish		No	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup	boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree"		No	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden	Booleanish		No	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid	boolean | "true" | "false" | "grammar" | "spelling"		No	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts	string		No	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label	string		No	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	string		No	Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level	number		No	Defines the hierarchical level of an element within a structure.
aria-live	"off" | "assertive" | "polite"		No	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal	Booleanish		No	Indicates whether an element is modal when displayed.
aria-multiline	Booleanish		No	Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable	Booleanish		No	Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	"horizontal" | "vertical"		No	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns	string		No	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder	string		No	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset	number		No	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed	boolean | "true" | "false" | "mixed"		No	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly	Booleanish		No	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
aria-relevant	"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"		No	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
aria-required	Booleanish		No	Indicates that user input is required on the element before a form may be submitted.
aria-roledescription	string		No	Defines a human-readable, author-localized description for the role of an element.
aria-rowcount	number		No	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex	number		No	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowspan	number		No	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected	Booleanish		No	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize	number		No	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort	"none" | "ascending" | "descending" | "other"		No	Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	number		No	Defines the maximum allowed value for a range widget.
aria-valuemin	number		No	Defines the minimum allowed value for a range widget.
aria-valuenow	number		No	Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext	string		No	Defines the human readable text alternative of aria-valuenow for a range widget.
autoCapitalize	string		No
autoCorrect	string		No
autoSave	string		No
className	string		No
color	string		No
contentEditable	Booleanish | "inherit"		No
contextMenu	string		No
dangerouslySetInnerHTML	{ __html: string; }		No
datatype	string		No
defaultChecked	boolean		No
defaultValue	string | number | readonly string[]		No
dir	string		No
draggable	Booleanish		No
hidden	boolean		No
id	string		No
inlist	any		No
inputMode	"text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"		No	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
is	string		No	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
itemID	string		No
itemProp	string		No
itemRef	string		No
itemScope	boolean		No
itemType	string		No
lang	string		No
onAbort	ReactEventHandler<HTMLDivElement>		No
onAbortCapture	ReactEventHandler<HTMLDivElement>		No
onAnimationEnd	AnimationEventHandler<HTMLDivElement>		No
onAnimationEndCapture	AnimationEventHandler<HTMLDivElement>		No
onAnimationIteration	AnimationEventHandler<HTMLDivElement>		No
onAnimationIterationCapture	AnimationEventHandler<HTMLDivElement>		No
onAnimationStart	AnimationEventHandler<HTMLDivElement>		No
onAnimationStartCapture	AnimationEventHandler<HTMLDivElement>		No
onAuxClick	MouseEventHandler<HTMLDivElement>		No
onAuxClickCapture	MouseEventHandler<HTMLDivElement>		No
onBeforeInput	FormEventHandler<HTMLDivElement>		No
onBeforeInputCapture	FormEventHandler<HTMLDivElement>		No
onBlur	FocusEventHandler<HTMLDivElement>		No
onBlurCapture	FocusEventHandler<HTMLDivElement>		No
onCanPlay	ReactEventHandler<HTMLDivElement>		No
onCanPlayCapture	ReactEventHandler<HTMLDivElement>		No
onCanPlayThrough	ReactEventHandler<HTMLDivElement>		No
onCanPlayThroughCapture	ReactEventHandler<HTMLDivElement>		No
onChange	FormEventHandler<HTMLDivElement>		No
onChangeCapture	FormEventHandler<HTMLDivElement>		No
onClick	MouseEventHandler<HTMLDivElement>		No
onClickCapture	MouseEventHandler<HTMLDivElement>		No
onCompositionEnd	CompositionEventHandler<HTMLDivElement>		No
onCompositionEndCapture	CompositionEventHandler<HTMLDivElement>		No
onCompositionStart	CompositionEventHandler<HTMLDivElement>		No
onCompositionStartCapture	CompositionEventHandler<HTMLDivElement>		No
onCompositionUpdate	CompositionEventHandler<HTMLDivElement>		No
onCompositionUpdateCapture	CompositionEventHandler<HTMLDivElement>		No
onContextMenu	MouseEventHandler<HTMLDivElement>		No
onContextMenuCapture	MouseEventHandler<HTMLDivElement>		No
onCopy	ClipboardEventHandler<HTMLDivElement>		No
onCopyCapture	ClipboardEventHandler<HTMLDivElement>		No
onCut	ClipboardEventHandler<HTMLDivElement>		No
onCutCapture	ClipboardEventHandler<HTMLDivElement>		No
onDoubleClick	MouseEventHandler<HTMLDivElement>		No
onDoubleClickCapture	MouseEventHandler<HTMLDivElement>		No
onDrag	DragEventHandler<HTMLDivElement>		No
onDragCapture	DragEventHandler<HTMLDivElement>		No
onDragEnd	DragEventHandler<HTMLDivElement>		No
onDragEndCapture	DragEventHandler<HTMLDivElement>		No
onDragEnter	DragEventHandler<HTMLDivElement>		No
onDragEnterCapture	DragEventHandler<HTMLDivElement>		No
onDragExit	DragEventHandler<HTMLDivElement>		No
onDragExitCapture	DragEventHandler<HTMLDivElement>		No
onDragLeave	DragEventHandler<HTMLDivElement>		No
onDragLeaveCapture	DragEventHandler<HTMLDivElement>		No
onDragOver	DragEventHandler<HTMLDivElement>		No
onDragOverCapture	DragEventHandler<HTMLDivElement>		No
onDragStart	DragEventHandler<HTMLDivElement>		No
onDragStartCapture	DragEventHandler<HTMLDivElement>		No
onDrop	DragEventHandler<HTMLDivElement>		No
onDropCapture	DragEventHandler<HTMLDivElement>		No
onDurationChange	ReactEventHandler<HTMLDivElement>		No
onDurationChangeCapture	ReactEventHandler<HTMLDivElement>		No
onEmptied	ReactEventHandler<HTMLDivElement>		No
onEmptiedCapture	ReactEventHandler<HTMLDivElement>		No
onEncrypted	ReactEventHandler<HTMLDivElement>		No
onEncryptedCapture	ReactEventHandler<HTMLDivElement>		No
onEnded	ReactEventHandler<HTMLDivElement>		No
onEndedCapture	ReactEventHandler<HTMLDivElement>		No
onError	ReactEventHandler<HTMLDivElement>		No
onErrorCapture	ReactEventHandler<HTMLDivElement>		No
onFocus	FocusEventHandler<HTMLDivElement>		No
onFocusCapture	FocusEventHandler<HTMLDivElement>		No
onGotPointerCapture	PointerEventHandler<HTMLDivElement>		No
onGotPointerCaptureCapture	PointerEventHandler<HTMLDivElement>		No
onInput	FormEventHandler<HTMLDivElement>		No
onInputCapture	FormEventHandler<HTMLDivElement>		No
onInvalid	FormEventHandler<HTMLDivElement>		No
onInvalidCapture	FormEventHandler<HTMLDivElement>		No
onKeyDown	KeyboardEventHandler<HTMLDivElement>		No
onKeyDownCapture	KeyboardEventHandler<HTMLDivElement>		No
onKeyPress	KeyboardEventHandler<HTMLDivElement>		No
onKeyPressCapture	KeyboardEventHandler<HTMLDivElement>		No
onKeyUp	KeyboardEventHandler<HTMLDivElement>		No
onKeyUpCapture	KeyboardEventHandler<HTMLDivElement>		No
onLoad	ReactEventHandler<HTMLDivElement>		No
onLoadCapture	ReactEventHandler<HTMLDivElement>		No
onLoadedData	ReactEventHandler<HTMLDivElement>		No
onLoadedDataCapture	ReactEventHandler<HTMLDivElement>		No
onLoadedMetadata	ReactEventHandler<HTMLDivElement>		No
onLoadedMetadataCapture	ReactEventHandler<HTMLDivElement>		No
onLoadStart	ReactEventHandler<HTMLDivElement>		No
onLoadStartCapture	ReactEventHandler<HTMLDivElement>		No
onLostPointerCapture	PointerEventHandler<HTMLDivElement>		No
onLostPointerCaptureCapture	PointerEventHandler<HTMLDivElement>		No
onMouseDown	MouseEventHandler<HTMLDivElement>		No
onMouseDownCapture	MouseEventHandler<HTMLDivElement>		No
onMouseEnter	MouseEventHandler<HTMLDivElement>		No
onMouseLeave	MouseEventHandler<HTMLDivElement>		No
onMouseMove	MouseEventHandler<HTMLDivElement>		No
onMouseMoveCapture	MouseEventHandler<HTMLDivElement>		No
onMouseOut	MouseEventHandler<HTMLDivElement>		No
onMouseOutCapture	MouseEventHandler<HTMLDivElement>		No
onMouseOver	MouseEventHandler<HTMLDivElement>		No
onMouseOverCapture	MouseEventHandler<HTMLDivElement>		No
onMouseUp	MouseEventHandler<HTMLDivElement>		No
onMouseUpCapture	MouseEventHandler<HTMLDivElement>		No
onPaste	ClipboardEventHandler<HTMLDivElement>		No
onPasteCapture	ClipboardEventHandler<HTMLDivElement>		No
onPause	ReactEventHandler<HTMLDivElement>		No
onPauseCapture	ReactEventHandler<HTMLDivElement>		No
onPlay	ReactEventHandler<HTMLDivElement>		No
onPlayCapture	ReactEventHandler<HTMLDivElement>		No
onPlaying	ReactEventHandler<HTMLDivElement>		No
onPlayingCapture	ReactEventHandler<HTMLDivElement>		No
onPointerCancel	PointerEventHandler<HTMLDivElement>		No
onPointerCancelCapture	PointerEventHandler<HTMLDivElement>		No
onPointerDown	PointerEventHandler<HTMLDivElement>		No
onPointerDownCapture	PointerEventHandler<HTMLDivElement>		No
onPointerEnter	PointerEventHandler<HTMLDivElement>		No
onPointerEnterCapture	PointerEventHandler<HTMLDivElement>		No
onPointerLeave	PointerEventHandler<HTMLDivElement>		No
onPointerLeaveCapture	PointerEventHandler<HTMLDivElement>		No
onPointerMove	PointerEventHandler<HTMLDivElement>		No
onPointerMoveCapture	PointerEventHandler<HTMLDivElement>		No
onPointerOut	PointerEventHandler<HTMLDivElement>		No
onPointerOutCapture	PointerEventHandler<HTMLDivElement>		No
onPointerOver	PointerEventHandler<HTMLDivElement>		No
onPointerOverCapture	PointerEventHandler<HTMLDivElement>		No
onPointerUp	PointerEventHandler<HTMLDivElement>		No
onPointerUpCapture	PointerEventHandler<HTMLDivElement>		No
onProgress	ReactEventHandler<HTMLDivElement>		No
onProgressCapture	ReactEventHandler<HTMLDivElement>		No
onRateChange	ReactEventHandler<HTMLDivElement>		No
onRateChangeCapture	ReactEventHandler<HTMLDivElement>		No
onReset	FormEventHandler<HTMLDivElement>		No
onResetCapture	FormEventHandler<HTMLDivElement>		No
onScroll	UIEventHandler<HTMLDivElement>		No
onScrollCapture	UIEventHandler<HTMLDivElement>		No
onSeeked	ReactEventHandler<HTMLDivElement>		No
onSeekedCapture	ReactEventHandler<HTMLDivElement>		No
onSeeking	ReactEventHandler<HTMLDivElement>		No
onSeekingCapture	ReactEventHandler<HTMLDivElement>		No
onSelect	ReactEventHandler<HTMLDivElement>		No
onSelectCapture	ReactEventHandler<HTMLDivElement>		No
onStalled	ReactEventHandler<HTMLDivElement>		No
onStalledCapture	ReactEventHandler<HTMLDivElement>		No
onSubmit	FormEventHandler<HTMLDivElement>		No
onSubmitCapture	FormEventHandler<HTMLDivElement>		No
onSuspend	ReactEventHandler<HTMLDivElement>		No
onSuspendCapture	ReactEventHandler<HTMLDivElement>		No
onTimeUpdate	ReactEventHandler<HTMLDivElement>		No
onTimeUpdateCapture	ReactEventHandler<HTMLDivElement>		No
onTouchCancel	TouchEventHandler<HTMLDivElement>		No
onTouchCancelCapture	TouchEventHandler<HTMLDivElement>		No
onTouchEnd	TouchEventHandler<HTMLDivElement>		No
onTouchEndCapture	TouchEventHandler<HTMLDivElement>		No
onTouchMove	TouchEventHandler<HTMLDivElement>		No
onTouchMoveCapture	TouchEventHandler<HTMLDivElement>		No
onTouchStart	TouchEventHandler<HTMLDivElement>		No
onTouchStartCapture	TouchEventHandler<HTMLDivElement>		No
onTransitionEnd	TransitionEventHandler<HTMLDivElement>		No
onTransitionEndCapture	TransitionEventHandler<HTMLDivElement>		No
onVolumeChange	ReactEventHandler<HTMLDivElement>		No
onVolumeChangeCapture	ReactEventHandler<HTMLDivElement>		No
onWaiting	ReactEventHandler<HTMLDivElement>		No
onWaitingCapture	ReactEventHandler<HTMLDivElement>		No
onWheel	WheelEventHandler<HTMLDivElement>		No
onWheelCapture	WheelEventHandler<HTMLDivElement>		No
placeholder	string		No
prefix	string		No
property	string		No
radioGroup	string		No
resource	string		No
results	number		No
role	AriaRole		No
security	string		No
slot	string		No
spellCheck	Booleanish		No
style	CSSProperties		No
suppressContentEditableWarning	boolean		No
suppressHydrationWarning	boolean		No
tabIndex	number		No
translate	"yes" | "no"		No
typeof	string		No
unselectable	"on" | "off"		No
vocab	string		No

DrawerBody

Name	Type	Default Value	Required	Description
bordered	boolean		No
key	Key		No
ref	Ref<HTMLDivElement>		No
scrollable	boolean		No

DrawerFooter

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

Name	Type	Default Value	Required	Description
key	Key		No
ref	Ref<HTMLDivElement>		No
responsive	boolean	false	No	If `true`, the footer will change layout and button ordering. This affects the default display of the footer and any immediate button children.

DrawerSlide

The DrawerSlide component allows you to slide in secondary content in a Drawer.

Name	Type	Default Value	Required	Description
onClickBack	() => void	() => {}	No
onEnter	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired before the component transitions in
onEntered	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired after the component finishes transitioning in
onEntering	(node: HTMLElement, isAppearing: boolean) => any		No	Callback fired as the component begins to transition in
onExit	(node: HTMLElement) => any		No	Callback fired right before the component transitions out
onExited	(node: HTMLElement) => any		No	Callback fired after the component finishes transitioning out
onExiting	(node: HTMLElement) => any		No	Callback fired as the component begins to transition out
renderBackButton	() => React.ReactNode		No
show	boolean	false	No