Drawer

Basic Usage


import { Drawer } from '@krakentech/coral/atoms';
 
const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer open={isOpen} onClose={() => setIsOpen(false)}>
    <Typography>Your content here</Typography>
</Drawer>

Properties

position


const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer
    open={isOpen}
    onClose={() => setIsOpen(false)}
    position="bottom"
>
    <Typography>Your content here</Typography>
</Drawer>

disableEscapeKeyDown


const [isOpen, setIsOpen] = useState(false);
 
<Button onClick={() => setIsOpen(true)}>Open drawer</Button>
 
<Drawer
    open={isOpen}
    onClose={() => setIsOpen(false)}
    disableEscapeKeyDown
>
    <Typography>Your content here</Typography>
</Drawer>

Event Handlers


<Drawer
    onClose={() => {}}
>
    ...
</Drawer>

Full API

Name	Type	Default
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`open`	`boolean` If `true`, the Drawer will be open by default.	`false`
`disableEscapeKeyDown`	`boolean` If `true`, the Drawer will not close when the user clicks outside of it.	`false`
`onClose`	`DrawerCloseCallback` A callback fired when the Drawer is closed. `event` The event source of the callback. `reason` The reason the Drawer was closed. ‘backdropClick’ - The user clicked the backdrop. ‘escapeKeyDown’ - The user pressed the escape key. ‘closeButtonClick’ - The user clicked the close button.
`position`	`"right" \| "left" \| "bottom"` The position of the Drawer relative to the viewport.	`right`
`closeButtonAttributes`	`Attributes` Attributes to be applied to the close button. This is useful for passing additional attributes like `aria-label` or `data-testid`.
`ariaLabelledBy`	`string` The `id` of the element that describes the Dialog. This should be an id of a child element.
`closedby`	`"any" \| "closerequest" \| "none" \| undefined` The `closedby` attribute is used to indicate what caused the dialog to close. ‘any’ indicates that the dialog can be closed by any method (backdrop click, escape key, close button). ‘closerequest’ indicates that the dialog can only be closed by calling the `close()` method on the dialog element, and not by user interactions. ‘none’ indicates that the dialog cannot be closed by any method, including programmatically. Note: Safari does not support the `closedby` attribute, so it will always behave as if `closedby` is set to ‘closerequest’. This means in Safari will open close by hittine the close button, or the escape key on the keyboard, but not by clicking outside of the dialog.	`any`