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} />
