Drawer

A drawer dialog is a window overlaid on either the primary window or another dialog window. Contents behind a drawer dialog are inert meaning that users cannot interact with content behind the dialog.

Import

Drawer: A Provider component that provides the context to the components it wraps.
DrawerOverlay: The overlay of the drawer.
DrawerContent: The content of the drawer.
DrawerHeader: The header of the drawer.
DrawerBody: The body of the drawer.
DrawerFooter: The footer of the drawer.

import {
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
} from '@trendmicro/react-styled-ui';import {
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
} from '@trendmicro/react-styled-ui';

Usage

Click the button below to toggle a drawer. The drawer will show up on either side of the screen.


EDITABLE EXAMPLE
const SelectableButton = ({ selected, ...props }) => {
  const [colorMode] = useColorMode();
  const { colors } = useTheme();
  const focusColor = colors['blue:60'];
  let _selectedColor = {
    dark: 'blue:60',
    light: 'blue:60',
  }[colorMode];
  _selectedColor = colors[_selectedColor];
  const getSelectedProps = {
    bg: _selectedColor,
    borderColor: _selectedColor,
    color: 'white:emphasis',
    cursor: 'default',
    pointerEvents: 'none',
    zIndex: 1,
    css: {
      '&::before': {
        backgroundColor: _selectedColor,
      },
      '&:focus': {
        ':not(:active)': {
          borderColor: focusColor,
          boxShadow: `inset 0 0 0 1px ${focusColor}`,
        },
        '&::before': {
          backgroundColor: focusColor,
        },
      }
    },
    _hover: {
      bg: _selectedColor,
    },
    _active: {
      bg: _selectedColor,
    },
  };
  return (
    <Button
      {...(selected && getSelectedProps)}
      {...props}
    />
  );
};

const useSelection = (defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const changeBy = (value) => () => setValue(value);
  return [value, changeBy];
};

const useToggle = (defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const toggle = () => setValue(value => !value);
  return [value, toggle, setValue];
};

const Divider = (props) => {
  const [colorMode] = useColorMode();
  const dividerColor = {
    dark: 'white:secondary',
    light: 'black:secondary',
  }[colorMode];
  return (
    <Box mb="4x" pb="4x" borderBottom={1} borderBottomColor={dividerColor} {...props} />
  );
};

const FormGroup = (props) => (
  <Box mb="4x">
    <Flex display="inline-flex" {...props} />
  </Box>
);

function Example() {
  const initialFocusRef = React.useRef();
  const [colorMode] = useColorMode();
  const iconColor = {
    dark: 'white:tertiary',
    light: 'black:tertiary',
  }[colorMode];
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [placement, changePlacementBy] = useSelection('right');
  const [ensureFocus, toggleEnsureFocus] = useToggle(true);
  const [autoFocus, toggleAutoFocus] = useToggle(true);
  const [backdrop, toggleBackdrop] = useToggle(true);
  const [closeOnEsc, toggleCloseOnEsc] = useToggle(true);
  const [closeOnOutsideClick, toggleCloseOnOutsideClick, setCloseOnOutsideClick] = useToggle(true);
  const [isClosable, toggleIsClosable] = useToggle(true);
  const [isOverlayVisible, toggleIsOverlayVisible, setIsOverlayVisible] = useToggle(true);
  const [isHeaderVisible, toggleIsHeaderVisible] = useToggle(true);
  const [isBodyVisible, toggleIsBodyVisible] = useToggle(true);
  const [isFooterVisible, toggleIsFooterVisible] = useToggle(true);
  const [isAlertVisible, toggleIsAlertVisible] = useToggle(true);
  const [size, changeSizeBy] = useSelection('sm');

  return (
    <>
      <Box>
        <Button onClick={onOpen}>
          Launch drawer
        </Button>
      </Box>
      <Divider />
      <FormGroup>
        <ButtonGroup
          variant="secondary"
          css={{
            '> *:not(:first-of-type)': {
              marginLeft: -1
            }
          }}
        >
          {['left', 'right'].map(value => (
            <SelectableButton
              key={value}
              selected={value === placement} 
              onClick={changePlacementBy(value)}
              minWidth="15x"
            >
              {value}
            </SelectableButton>
          ))}
        </ButtonGroup>
      </FormGroup>
      <FormGroup>
        <ButtonGroup
          variant="secondary"
          css={{
            '> *:not(:first-of-type)': {
              marginLeft: -1
            }
          }}
        >
          {['auto', 'sm', 'md', 'lg', 'full'].map(value => (
            <SelectableButton
              key={value}
              selected={value === size}
              onClick={changeSizeBy(value)}
              minWidth="15x"
            >
              {value}
            </SelectableButton>
          ))}
        </ButtonGroup>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={ensureFocus}
            onChange={toggleEnsureFocus}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">ensureFocus</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={autoFocus}
            disabled={!ensureFocus}
            onChange={toggleAutoFocus}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">autoFocus</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={backdrop}
            onChange={(e) => {
              const nextBackdrop = !backdrop;
              if (!nextBackdrop) {
                setCloseOnOutsideClick(false);
                setIsOverlayVisible(false);
              }

              toggleBackdrop(e);
            }}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">backdrop</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={isClosable}
            disabled={!closeOnEsc && !closeOnOutsideClick}
            onChange={toggleIsClosable}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">isClosable</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={closeOnEsc}
            disabled={!isClosable && !closeOnOutsideClick}
            onChange={toggleCloseOnEsc}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">closeOnEsc</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={closeOnOutsideClick}
            disabled={(!isClosable && !closeOnEsc) || !backdrop}
            onChange={toggleCloseOnOutsideClick}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">closeOnOutsideClick</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={isOverlayVisible}
            disabled={!backdrop}
            onChange={toggleIsOverlayVisible}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerOverlay</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isHeaderVisible} onChange={toggleIsHeaderVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerHeader</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isBodyVisible} onChange={toggleIsBodyVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerBody</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isFooterVisible} onChange={toggleIsFooterVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerFooter</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isAlertVisible} onChange={toggleIsAlertVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">Alert</Text>
        </TextLabel>
      </FormGroup>
      <Slide
        in={isOpen}
        duration={250}
        from={placement}
        finalHeight="100vh"
      >
        {styles => (
          <Drawer
            ensureFocus={ensureFocus}
            autoFocus={autoFocus}
            backdrop={backdrop}
            initialFocusRef={initialFocusRef}
            isClosable={isClosable}
            isOpen={true} // Set to `true` if a transition is active
            closeOnEsc={closeOnEsc}
            closeOnOutsideClick={closeOnOutsideClick}
            onClose={onClose}
            placement={placement}
            size={size}
          >
            {isOverlayVisible && (
              <DrawerOverlay opacity={styles.opacity} />
            )}
            <DrawerContent {...styles}>
              {isHeaderVisible && (
                <DrawerHeader>
                  Drawer Title
                </DrawerHeader>
              )}
              {isBodyVisible && (
                <DrawerBody>
                  {isAlertVisible && (
                    <Alert variant="outline" severity="info" mb="4x" isClosable onClose={() => toggleIsAlertVisible()}>
                      <Text>This is an info alert</Text>
                    </Alert>
                  )}
                  <Text mb="4x">
                    You can put any elements you want here.
                  </Text>
                  <Grid
                    templateColumns="auto 1fr"
                    rowGap="2x"
                    columnGap="3x"
                    alignItems="center"
                  >
                    <Icon icon="user" color={iconColor} />
                    <Input ref={initialFocusRef} placeholder="User name" />
                    <Icon icon="email" color={iconColor} />
                    <Input placeholder="Email address" />
                  </Grid>
                </DrawerBody>
              )}
              {isFooterVisible && (
                <DrawerFooter>
                  <Button variant="primary" onClick={onClose} minWidth="20x">
                    OK
                  </Button>
                  <Space width="2x" />
                  <Button onClick={onClose} minWidth="20x">
                    Cancel
                  </Button>
                </DrawerFooter>
              )}
            </DrawerContent>
          </Drawer>
        )}
      </Slide>
    </>
  );
}

render(<Example />);const SelectableButton = ({ selected, ...props }) => {
  const [colorMode] = useColorMode();
  const { colors } = useTheme();
  const focusColor = colors['blue:60'];
  let _selectedColor = {
    dark: 'blue:60',
    light: 'blue:60',
  }[colorMode];
  _selectedColor = colors[_selectedColor];
  const getSelectedProps = {
    bg: _selectedColor,
    borderColor: _selectedColor,
    color: 'white:emphasis',
    cursor: 'default',
    pointerEvents: 'none',
    zIndex: 1,
    css: {
      '&::before': {
        backgroundColor: _selectedColor,
      },
      '&:focus': {
        ':not(:active)': {
          borderColor: focusColor,
          boxShadow: `inset 0 0 0 1px ${focusColor}`,
        },
        '&::before': {
          backgroundColor: focusColor,
        },
      }
    },
    _hover: {
      bg: _selectedColor,
    },
    _active: {
      bg: _selectedColor,
    },
  };
  return (
    <Button
      {...(selected && getSelectedProps)}
      {...props}
    />
  );
};

const useSelection = (defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const changeBy = (value) => () => setValue(value);
  return [value, changeBy];
};

const useToggle = (defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const toggle = () => setValue(value => !value);
  return [value, toggle, setValue];
};

const Divider = (props) => {
  const [colorMode] = useColorMode();
  const dividerColor = {
    dark: 'white:secondary',
    light: 'black:secondary',
  }[colorMode];
  return (
    <Box mb="4x" pb="4x" borderBottom={1} borderBottomColor={dividerColor} {...props} />
  );
};

const FormGroup = (props) => (
  <Box mb="4x">
    <Flex display="inline-flex" {...props} />
  </Box>
);

function Example() {
  const initialFocusRef = React.useRef();
  const [colorMode] = useColorMode();
  const iconColor = {
    dark: 'white:tertiary',
    light: 'black:tertiary',
  }[colorMode];
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [placement, changePlacementBy] = useSelection('right');
  const [ensureFocus, toggleEnsureFocus] = useToggle(true);
  const [autoFocus, toggleAutoFocus] = useToggle(true);
  const [backdrop, toggleBackdrop] = useToggle(true);
  const [closeOnEsc, toggleCloseOnEsc] = useToggle(true);
  const [closeOnOutsideClick, toggleCloseOnOutsideClick, setCloseOnOutsideClick] = useToggle(true);
  const [isClosable, toggleIsClosable] = useToggle(true);
  const [isOverlayVisible, toggleIsOverlayVisible, setIsOverlayVisible] = useToggle(true);
  const [isHeaderVisible, toggleIsHeaderVisible] = useToggle(true);
  const [isBodyVisible, toggleIsBodyVisible] = useToggle(true);
  const [isFooterVisible, toggleIsFooterVisible] = useToggle(true);
  const [isAlertVisible, toggleIsAlertVisible] = useToggle(true);
  const [size, changeSizeBy] = useSelection('sm');

  return (
    <>
      <Box>
        <Button onClick={onOpen}>
          Launch drawer
        </Button>
      </Box>
      <Divider />
      <FormGroup>
        <ButtonGroup
          variant="secondary"
          css={{
            '> *:not(:first-of-type)': {
              marginLeft: -1
            }
          }}
        >
          {['left', 'right'].map(value => (
            <SelectableButton
              key={value}
              selected={value === placement} 
              onClick={changePlacementBy(value)}
              minWidth="15x"
            >
              {value}
            </SelectableButton>
          ))}
        </ButtonGroup>
      </FormGroup>
      <FormGroup>
        <ButtonGroup
          variant="secondary"
          css={{
            '> *:not(:first-of-type)': {
              marginLeft: -1
            }
          }}
        >
          {['auto', 'sm', 'md', 'lg', 'full'].map(value => (
            <SelectableButton
              key={value}
              selected={value === size}
              onClick={changeSizeBy(value)}
              minWidth="15x"
            >
              {value}
            </SelectableButton>
          ))}
        </ButtonGroup>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={ensureFocus}
            onChange={toggleEnsureFocus}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">ensureFocus</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={autoFocus}
            disabled={!ensureFocus}
            onChange={toggleAutoFocus}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">autoFocus</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={backdrop}
            onChange={(e) => {
              const nextBackdrop = !backdrop;
              if (!nextBackdrop) {
                setCloseOnOutsideClick(false);
                setIsOverlayVisible(false);
              }

              toggleBackdrop(e);
            }}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">backdrop</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={isClosable}
            disabled={!closeOnEsc && !closeOnOutsideClick}
            onChange={toggleIsClosable}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">isClosable</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={closeOnEsc}
            disabled={!isClosable && !closeOnOutsideClick}
            onChange={toggleCloseOnEsc}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">closeOnEsc</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={closeOnOutsideClick}
            disabled={(!isClosable && !closeOnEsc) || !backdrop}
            onChange={toggleCloseOnOutsideClick}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">closeOnOutsideClick</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox
            checked={isOverlayVisible}
            disabled={!backdrop}
            onChange={toggleIsOverlayVisible}
          />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerOverlay</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isHeaderVisible} onChange={toggleIsHeaderVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerHeader</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isBodyVisible} onChange={toggleIsBodyVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerBody</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isFooterVisible} onChange={toggleIsFooterVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">DrawerFooter</Text>
        </TextLabel>
      </FormGroup>
      <FormGroup>
        <TextLabel display="flex" alignItems="center">
          <Checkbox checked={isAlertVisible} onChange={toggleIsAlertVisible} />
          <Space width="2x" />
          <Text fontFamily="mono" whiteSpace="nowrap">Alert</Text>
        </TextLabel>
      </FormGroup>
      <Slide
        in={isOpen}
        duration={250}
        from={placement}
        finalHeight="100vh"
      >
        {styles => (
          <Drawer
            ensureFocus={ensureFocus}
            autoFocus={autoFocus}
            backdrop={backdrop}
            initialFocusRef={initialFocusRef}
            isClosable={isClosable}
            isOpen={true} // Set to `true` if a transition is active
            closeOnEsc={closeOnEsc}
            closeOnOutsideClick={closeOnOutsideClick}
            onClose={onClose}
            placement={placement}
            size={size}
          >
            {isOverlayVisible && (
              <DrawerOverlay opacity={styles.opacity} />
            )}
            <DrawerContent {...styles}>
              {isHeaderVisible && (
                <DrawerHeader>
                  Drawer Title
                </DrawerHeader>
              )}
              {isBodyVisible && (
                <DrawerBody>
                  {isAlertVisible && (
                    <Alert variant="outline" severity="info" mb="4x" isClosable onClose={() => toggleIsAlertVisible()}>
                      <Text>This is an info alert</Text>
                    </Alert>
                  )}
                  <Text mb="4x">
                    You can put any elements you want here.
                  </Text>
                  <Grid
                    templateColumns="auto 1fr"
                    rowGap="2x"
                    columnGap="3x"
                    alignItems="center"
                  >
                    <Icon icon="user" color={iconColor} />
                    <Input ref={initialFocusRef} placeholder="User name" />
                    <Icon icon="email" color={iconColor} />
                    <Input placeholder="Email address" />
                  </Grid>
                </DrawerBody>
              )}
              {isFooterVisible && (
                <DrawerFooter>
                  <Button variant="primary" onClick={onClose} minWidth="20x">
                    OK
                  </Button>
                  <Space width="2x" />
                  <Button onClick={onClose} minWidth="20x">
                    Cancel
                  </Button>
                </DrawerFooter>
              )}
            </DrawerContent>
          </Drawer>
        )}
      </Slide>
    </>
  );
}

render(<Example />);

Placements

Use the placement prop to if you want to change the placement of the drawer. The value can be one of right (default) or left.


EDITABLE EXAMPLE
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [placement, setPlacement] = React.useState('right');
  const handleClickBy = nextPlacement => (e) => {
    setPlacement(nextPlacement);
    onOpen();
  };

  return (
    <>
      <Stack direction="row" spacing="2x">
        <Button onClick={handleClickBy('left')}>
          <Flex align="center">
            <Icon icon="chevron-right" mr="2x" />
            Left
          </Flex>
        </Button>
        <Button onClick={handleClickBy('right')}>
          <Flex align="center">
            <Icon icon="chevron-left" mr="2x" />
            Right
          </Flex>
        </Button>
      </Stack>
      <Drawer
        ensureFocus
        autoFocus
        backdrop
        isClosable
        isOpen={isOpen}
        closeOnEsc
        closeOnOutsideClick
        onClose={onClose}
        placement={placement}
        size="sm"
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            Drawer Title
          </DrawerHeader>
          <DrawerBody>
            <Lorem count={2} />
          </DrawerBody>
          <DrawerFooter>
            <Button onClick={onClose}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [placement, setPlacement] = React.useState('right');
  const handleClickBy = nextPlacement => (e) => {
    setPlacement(nextPlacement);
    onOpen();
  };

  return (
    <>
      <Stack direction="row" spacing="2x">
        <Button onClick={handleClickBy('left')}>
          <Flex align="center">
            <Icon icon="chevron-right" mr="2x" />
            Left
          </Flex>
        </Button>
        <Button onClick={handleClickBy('right')}>
          <Flex align="center">
            <Icon icon="chevron-left" mr="2x" />
            Right
          </Flex>
        </Button>
      </Stack>
      <Drawer
        ensureFocus
        autoFocus
        backdrop
        isClosable
        isOpen={isOpen}
        closeOnEsc
        closeOnOutsideClick
        onClose={onClose}
        placement={placement}
        size="sm"
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            Drawer Title
          </DrawerHeader>
          <DrawerBody>
            <Lorem count={2} />
          </DrawerBody>
          <DrawerFooter>
            <Button onClick={onClose}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Sizes

Use the size prop to change the size of the Drawer. You can set the value to auto, sm, md, lg, or full.


EDITABLE EXAMPLE
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [size, setSize] = React.useState('auto');
  const handleClickBy = nextSize => (e) => {
    setSize(nextSize);
    onOpen();
  };

  return (
    <>
      <Stack direction="row" spacing="2x">
        <Button onClick={handleClickBy('auto')}>Auto width</Button>
        <Button onClick={handleClickBy('sm')}>Small width</Button>
        <Button onClick={handleClickBy('md')}>Medium width</Button>
        <Button onClick={handleClickBy('lg')}>Large width</Button>
        <Button onClick={handleClickBy('full')}>Full width</Button>
      </Stack>
      <Drawer
        ensureFocus
        autoFocus
        backdrop
        isClosable
        isOpen={isOpen}
        closeOnEsc
        closeOnOutsideClick
        onClose={onClose}
        size={size}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            Drawer Title
          </DrawerHeader>
          <DrawerBody>
            <Lorem count={2} />
          </DrawerBody>
          <DrawerFooter>
            <Button onClick={onClose}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [size, setSize] = React.useState('auto');
  const handleClickBy = nextSize => (e) => {
    setSize(nextSize);
    onOpen();
  };

  return (
    <>
      <Stack direction="row" spacing="2x">
        <Button onClick={handleClickBy('auto')}>Auto width</Button>
        <Button onClick={handleClickBy('sm')}>Small width</Button>
        <Button onClick={handleClickBy('md')}>Medium width</Button>
        <Button onClick={handleClickBy('lg')}>Large width</Button>
        <Button onClick={handleClickBy('full')}>Full width</Button>
      </Stack>
      <Drawer
        ensureFocus
        autoFocus
        backdrop
        isClosable
        isOpen={isOpen}
        closeOnEsc
        closeOnOutsideClick
        onClose={onClose}
        size={size}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerHeader>
            Drawer Title
          </DrawerHeader>
          <DrawerBody>
            <Lorem count={2} />
          </DrawerBody>
          <DrawerFooter>
            <Button onClick={onClose}>
              Close
            </Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

Transitions

The drawer doesn't come with transitions by default. You can use the Transition components to provide simple transitions.

When using transitions, you have to set isOpen to true, or the transition will not take effect when closing the drawer.

Adding slide transition

import { Slide } from '@trendmicro/react-styled-ui';import { Slide } from '@trendmicro/react-styled-ui';


EDITABLE EXAMPLE
function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>
        Launch drawer
      </Button>
      <Slide
        in={isOpen}
        from="right"
        finalHeight="100vh"
      >
        {styles => (
          <Drawer
            backdrop
            isClosable
            isOpen={true} // Set to `true` if a transition is active
            closeOnEsc
            closeOnOutsideClick
            onClose={onClose}
            placement="right"
            size="sm"
          >
            <DrawerOverlay opacity={styles.opacity} />
            <DrawerContent {...styles}>
              <DrawerHeader>
                Drawer Title
              </DrawerHeader>
              <DrawerBody>
                <Lorem count={2} />
              </DrawerBody>
              <DrawerFooter>
                <Button onClick={onClose}>
                  Close
                </Button>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        )}
      </Slide>
    </>
  );
}function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>
        Launch drawer
      </Button>
      <Slide
        in={isOpen}
        from="right"
        finalHeight="100vh"
      >
        {styles => (
          <Drawer
            backdrop
            isClosable
            isOpen={true} // Set to `true` if a transition is active
            closeOnEsc
            closeOnOutsideClick
            onClose={onClose}
            placement="right"
            size="sm"
          >
            <DrawerOverlay opacity={styles.opacity} />
            <DrawerContent {...styles}>
              <DrawerHeader>
                Drawer Title
              </DrawerHeader>
              <DrawerBody>
                <Lorem count={2} />
              </DrawerBody>
              <DrawerFooter>
                <Button onClick={onClose}>
                  Close
                </Button>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        )}
      </Slide>
    </>
  );
}

Props

Drawer

Name	Type	Default	Description
ensureFocus	boolean	false	If `true`, it will always bring the focus back to the `Drawer` descendants, which does not allow the focus to escape while open.
autoFocus	boolean	false	If `true` and `ensureFocus` is `true` and `initialFocusRef` is not set, it will automatically set focus on the first focusable element.
backdrop	boolean	false	If `true`, it will wrap components with a backdrop to provide a click area for dismissing when clicking outside the drawer.
finalFocusRef	React.ref		The `ref` of element to receive focus when the drawer closes.
initialFocusRef	React.ref		The `ref` of the element to receive focus when the drawer opens.
isOpen	boolean	false	If `true`, the drawer is shown.
isClosable	boolean	false	If `true`, a close button will appear on the right side.
closeOnEsc	boolean	false	If `true`, close the drawer when the `esc` key is pressed.
closeOnOutsideClick	boolean	false	If `true`, close the drawer when click outside of the drawer. Note that this value will not have any effect when `backdrop` is set to `true`.
onClose	function		Callback fired when the drawer closes.
placement	string	'right'	The placement of the drawer. One of: `'left'`, `'right'`
size	string	'auto'	The size of the drawer. One of: `'auto'`, `'sm'`, `'md'`, `'lg'`, `'full'`