ActionSheet

A pre-styled action picker built on top of BottomSheet. Renders a vertical list of buttons with optional title and Cancel — modeled after iOS UIActionSheet. Use it when the user needs to pick one action from a short list (3-6 items), typically as a "more actions" or "share" picker.

Basic Usage

Destructive actions

Pass destructive: true on an action to render its label in danger color + semibold weight. This is the iOS convention for delete / sign-out / unrecoverable operations.

{ label: 'Delete project', onClick: confirmDelete, destructive: true }

The destructive style is purely visual — it does not add a confirmation step. Pair it with a Dialog (or a follow-up ActionSheet) if you want a second prompt before the action fires.

Without Cancel button

Omit cancelLabel to render no Cancel — handy on Android where the system back button serves the same purpose, or when every action is non-destructive.

<ActionSheet
  open={open}
  onClose={close}
  actions={[
    { label: 'Photo', onClick: takePhoto },
    { label: 'Video', onClick: takeVideo },
    { label: 'Choose from library', onClick: openLibrary },
  ]}
/>

Disabled actions

Each action can be individually disabled via action.disabled:

{ label: 'Restore', onClick: handleRestore, disabled: !hasBackup }

Auto-close behavior

ActionSheet does not auto-close on action press — your onClick handler is responsible for calling onClose (or transitioning to another sheet). This is deliberate: it lets you chain confirmation flows without flicker.

actions={[
  {
    label: 'Delete',
    destructive: true,
    onClick: async () => {
      await deleteItem();
      setOpen(false);          // close after success
    },
  },
]}

Mobile considerations

• Each action row meets the 44×56px tap target (taller than minimum for thumb comfort).
• Inherits all BottomSheet behavior: .tui-glass surface, safe-area awareness, body-scroll lock.
• showHandle is forced off and dismissible is forced false for ActionSheet — users dismiss via Cancel or backdrop tap, not by dragging.
• For 6+ options or actions with rich content (icons, descriptions), use a plain BottomSheet with your own list instead.

Props

Prop	Type	Default	Description
open*	boolean	-	Whether the sheet is open (controlled)
onClose*	() => void	-	Called when the sheet should close (backdrop tap or cancel)
actions*	ActionSheetAction[]	-	{ label, onClick, destructive?, disabled? } — see below
title	ReactNode	-	Optional title shown above the actions
cancelLabel	string	-	Label for the Cancel button. If undefined, no Cancel is rendered.

ActionSheetAction

Prop	Type	Default	Description
label*	string	-	Visible label for the action
onClick*	() => void	-	Click handler (sheet does not auto-close — call onClose yourself)
destructive	boolean	false	Render label in danger color + semibold (iOS destructive style)
disabled	boolean	false	Disable this action