Action SheetiOS

iOS-style slide-up sheet with backdrop dismiss and safe-area padding.

$ npx lumioui add action-sheet

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

Props8

actions	ActionSheetAction[]	List of actions; destructive ones render first (iOS idiom).
open?	boolean	Controlled open state. Omit for uncontrolled use with defaultOpen.
defaultOpen?	boolean	Uncontrolled initial open state. Default false.
onOpenChange?	(open: boolean) => void
title?	string	Optional bold title above the actions.
message?	string	Optional descriptive message below the title.
cancelLabel?	string	Label for the separated cancel button. Default "Cancel".
className?	string	Extra classes for the sheet container.

Action Sheet — Confirmconfirm.tsx

action-sheet/variants/confirm.tsx open

iOS-style slide-up sheet with backdrop dismiss and safe-area padding.

import { ActionSheetConfirm } from "@/components/ui/action-sheet/variants/confirm";

export function Example() {
  return (
    <ActionSheetConfirm />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ActionSheet } from "../action-sheet";
import { Button } from "../../button/button";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ActionSheetConfirm — destructive confirmation sheet for deleting a photo. */
export function ActionSheetConfirm() {
  const [open, setOpen] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="gap-0.5">
            <Text variant="small" className="font-semibold">Kiyomizu at dusk — IMG_4218</Text>
            <Text variant="muted">Shot Apr 12 · shared with 6 people</Text>
          </View>
          <Button variant="glass" onPress={() => setOpen(true)}>Delete this photo</Button>
          <ActionSheet
            open={open}
            onOpenChange={setOpen}
            title="Delete this photo?"
            message="It leaves the album and everyone's shared copies."
            actions={[
              { label: "Delete photo", destructive: true, onPress: () => {} },
              { label: "Remove from shared album only", onPress: () => {} },
            ]}
            cancelLabel="Keep photo"
          />
        </Glass>
      </View>
  );
}

Action Sheet — Shareshare.tsx

action-sheet/variants/share.tsx open

iOS-style slide-up sheet with backdrop dismiss and safe-area padding.

import { ActionSheetShare } from "@/components/ui/action-sheet/variants/share";

export function Example() {
  return (
    <ActionSheetShare />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ActionSheet } from "../action-sheet";
import { Button } from "../../button/button";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** ActionSheetShare — photo share sheet with disabled + destructive actions. */
export function ActionSheetShare() {
  const [open, setOpen] = React.useState(false);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="gap-0.5">
            <Text variant="small" className="font-semibold">Kyoto at Dusk.jpg</Text>
            <Text variant="muted">Photo by Amara Chen · posted 2m ago</Text>
          </View>
          <Button variant="glass" onPress={() => setOpen(true)}>Share “Kyoto at Dusk”</Button>
          <ActionSheet
            open={open}
            onOpenChange={setOpen}
            title="Kyoto at Dusk.jpg"
            message="4.2 MB · Actions apply to this photo"
            actions={[
              { label: "Send in Message", onPress: () => {} },
              { label: "Add to Lisbon Album", onPress: () => {} },
              { label: "Set as Wallpaper", disabled: true, onPress: () => {} },
              { label: "Delete Photo", destructive: true, onPress: () => {} },
            ]}
            cancelLabel="Keep Photo"
          />
        </Glass>
      </View>
  );
}