import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Drawer } from './Drawer';

<Meta title="MDX|Drawer" component={Drawer} />

# Drawer
### When to use
Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.


One example of the Drawer in use is in Grafana's [panel inspector](https://grafana.com/docs/grafana/latest/panels/inspect-panel/).

### Usage
```tsx
import { Drawer } from '@grafana/ui';

onClose = () => {
  // handle the show or hide Drawer logic
}

return (
  <Drawer
    title="This a Drawer"
    width="60%"
    onClose={this.onClose}
  >
    <div>
       Put your Drawer content here
    </div>
  </Drawer>
)
```


<Props of={Drawer} />
