Drawer

A versatile UI element that displays additional content or options in a collapsible panel.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            import { Button, Drawer } from '@optimus-web/core';
                                                        
                                                        export const MyDrawerComponent = () => {
                                                            const [open, setOpen] = useState(false);
                                                        
                                                            return (
                                                                <>
                                                                    <Button onClick={() => setOpen(true)}>Click me</Button>
                                                                    <Drawer open={open} onClose={() => setOpen(false)} dragBarLabel="Drag to close">
                                                                        Drawer content
                                                                    </Drawer>
                                                                </>
                                                            );
                                                        };