# Action Sheet

Detached sheet of actions that rises from the bottom over a fading backdrop. Your pick stays highlighted as the other rows dim, then the sheet closes. Drag down or tap outside to dismiss.

> Composed · Free · Overlays — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add action-sheet
```

## Import

```tsx
import { ActionSheet } from "@/components/ui/action-sheet/action-sheet";
```

## Variants

- `confirm` — Confirm: `npx @lumioui/cli add action-sheet-confirm`
- `share` — Share: `npx @lumioui/cli add action-sheet-share`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `open?` | `boolean` | Controlled open state. Omit for uncontrolled use with defaultOpen. |
| `defaultOpen?` | `boolean` | Uncontrolled initial open state. Default false. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `actions` | `ActionSheetAction[]` | List of actions; destructive ones render first. |
| `title?` | `string` | Optional title above the actions (13pt, muted). |
| `message?` | `string` | Optional descriptive message below the title. |
| `cancelLabel?` | `string` | Label for the separated cancel button. Default "Cancel". |
| `material?` | `"solid" | "glass"` | Surface material. "solid" (default) is an opaque popover surface that reads in light and dark over any screen; "glass" opts into Lumio glass — use it only when the sheet floats over photos or video. |
| `className?` | `string` | Extra classes for the sheet container. |

Source: https://lumioui.com/components/action-sheet