# Sheet

> A Drawer that slides in from any edge: side="right" (default), "left", "top" or "bottom".

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Sheet/)

A `Drawer` that slides in from any edge: `side="right"` (default), `"left"`, `"top"` or
`"bottom"`. Bottom sheets suit filters and quick actions on phones; left sheets hold navigation.

- Focus moves into the sheet and stays there until it closes; Escape and a click outside close it.

## Example

```tsx
import * as React from "react";
import { Button, Drawer, SelectMenu } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        position: "relative",
        height: 420,
        borderRadius: "var(--radius-lg)",
        overflow: "hidden",
        background: "var(--canvas)",
      }}
    >
      <Drawer
        inline
        side="bottom"
        title="Filters"
        subtitle="12 of 48 listings match"
        onClose={() => {}}
      >
        <div className="tf-grid" style={{ "--cols": "1fr 1fr", gap: 16 } as React.CSSProperties}>
          <SelectMenu label="Rooms" defaultValue="3" options={["1", "2", "3", "4+"]} />
          <SelectMenu label="Sort by" defaultValue="Newest" options={["Newest", "Price", "Size"]} />
        </div>
        <div className="tf-row" style={{ justifyContent: "flex-end" }}>
          <Button variant="ghost">Reset</Button>
          <Button>Show 12 listings</Button>
        </div>
      </Drawer>
    </div>
  );
}
```

## Props

### Drawer

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Required |
| `subtitle?` | `ReactNode` |  |
| `avatar?` | `string` |  |
| `onClose?` | `() => void` |  |
| `width?` | `number \| string` |  |
| `inline?` | `boolean` |  |
| `children?` | `ReactNode` |  |
| `open?` | `boolean` | Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### SelectMenu

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `(string \| SelectMenuOption)[]` | Required |
| `value?` | `string` |  |
| `defaultValue?` | `string` |  |
| `onChange?` | `(value: string) => void` |  |
| `placeholder?` | `string` |  |
| `disabled?` | `boolean` |  |
| `size?` | `"sm" \| "md"` | `sm`: a compact trigger, e.g. a sort menu next to a heading. |
| `label?` | `string` |  |
| `hint?` | `string` |  |
| `error?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |