Drawers overlay content over existing parts of the UI and are anchored to the edge of the screen.




Drawer is a stateless React component controlled by the isOpen prop. Below a component uses it's state to control the Drawer.

import React from "react";
import { Drawer } from "@commure/components-foundation";
import { Button } from "@commure/components-foundation";
class MyDrawer extends React.Component {
constructor() {
this.state = {
isOpen: false
this.closeAlert = this.closeAlert.bind(this);
this.openAlert = this.openAlert.bind(this);
closeAlert() {
isOpen: false
openAlert() {
isOpen: true
render() {
return (
<Button onClick={this.openAlert}>Show Drawer</Button>
<div className={Classes.DRAWER_BODY}>
<div className={Classes.DIALOG_BODY}>This is a drawer</div>
<div className={Classes.DRAWER_FOOTER}> </div>
export default MyDrawer;

API Reference


Prop NameRequired?TypeDescription
autoFocusfalsebooleanWhether the overlay should acquire application focus when it first opens.
backdropClassNamefalsestringCSS class names to apply to backdrop element.
backdropPropsfalseHTMLProps<HTMLDivElement>HTML props for the backdrop element.
canEscapeKeyClosefalsebooleanWhether pressing the `esc` key should invoke `onClose`.
canOutsideClickClosefalsebooleanWhether clicking outside the overlay element (either on backdrop when present or on document) should invoke `onClose`.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
enforceFocusfalsebooleanWhether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`.
hasBackdropfalsebooleanWhether a container-spanning backdrop element should be rendered behind the contents.
iconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render in the drawer's header. Note that the header will only be rendered if `title` is provided.
isCloseButtonShownfalsebooleanWhether to show the close button in the dialog's header. Note that the header will only be rendered if `title` is provided.
isOpentruebooleanToggles the visibility of the overlay and its children. This prop is required because the component is controlled.
lazyfalsebooleanIf `true` and `usePortal={true}`, the `Portal` containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table.
onClosefalse(event?: SyntheticEvent<HTMLElement>) => voidA callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the `esc` key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it will not actually close itself until that prop becomes `false`.
onClosedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.
onClosingfalse(node: HTMLElement) => voidLifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.
onOpenedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.
onOpeningfalse(node: HTMLElement) => voidLifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.
portalClassNamefalsestringSpace-delimited string of class names applied to the `Portal` element if `usePortal={true}`.
portalContainerfalseHTMLElementThe container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
positionfalsePositionPosition of a drawer. All angled positions will be casted into pure positions (TOP, BOTTOM, LEFT or RIGHT).
sizefalsenumber | stringCSS size of the drawer. This sets `width` if `vertical={false}` (default) and `height` otherwise. Constants are available for common sizes: - `Drawer.SIZE_SMALL = 360px` - `Drawer.SIZE_STANDARD = 50%` - `Drawer.SIZE_LARGE = 90%`
stylefalseCSSPropertiesCSS styles to apply to the dialog.
titlefalseReact.ReactNodeTitle of the dialog. If provided, an element with `Classes.DIALOG_HEADER` will be rendered inside the dialog before any children elements.
transitionDurationfalsenumberIndicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
transitionNamefalsestringName of the transition for internal `CSSTransition`. Providing your own name here will require defining new CSS transition properties.
usePortalfalsebooleanWhether the overlay should be wrapped in a `Portal`, which renders its contents in a new element attached to `portalContainer` prop. This prop essentially determines which element is covered by the backdrop: if `false`, then only its parent is covered; otherwise, the entire page is covered (because the parent of the `Portal` is the `<body>` itself). Set this prop to `false` on nested overlays (such as `Dialog` or `Popover`) to ensure that they are rendered above their parents.
verticalfalsebooleanWhether the drawer should appear with vertical styling. It will be ignored if `position` prop is set

Related Reading

Blueprint Reference