# Sheet (/docs/products/dash-dots/reference/components/sheet)

The sheet doesn't close on its own: set `open` back to false in `onClose`.

**Children:** Components

## Example

![The Sheet component](/assets/images/dash-dots/components/sheet.webp)

```xml title="view.dml"
<View>
  <Button variant="secondary" onClick="openSheet">Payment options</Button>
  <Sheet open="{{ open }}" title="Payment" onClose="close">
    <Button variant="secondary" onClick="close">Copy reference</Button>
    <Button onClick="close">Done</Button>
  </Sheet>
</View>
```

```ts title="controller.ts"
export default definePage({
  initialState: { open: false },
  mutations: {
    openSheet: () => ({ open: true }),
    close: () => ({ open: false }),
  },
});
```

## Props

| Prop                                                                   | Type                                                             | What it is                                                                               |
| ---------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| `open`                                                                 | `boolean`                                                        | Whether the sheet shows.                                                                 |
| `title`                                                                | `string`                                                         |                                                                                          |
| `showCloseIcon`                                                        | `boolean`                                                        | Shows a close button in the corner. Tapping it sends `onClose`, as tapping outside does. |
| `padding`, `paddingTop`, `paddingStart`, `paddingEnd`, `paddingBottom` | [spacing](/docs/products/dash-dots/reference/components#spacing) | Space inside its edges, all round or on one side.                                        |

## Events

| Event     | Sends   | Notes                                             |
| --------- | ------- | ------------------------------------------------- |
| `onClose` | Nothing | The person tapped outside it or its close button. |