Action Sheet

A mobile-first bottom sheet presenting a set of contextual actions. Built on Base UI Dialog. Compound component pattern with Header, Group, Item, Separator, and Cancel. Three sizes. Five corner-rounding options. Destructive intent, loading state, icon slots. LTR and RTL support.

Installation

pnpm add @tessinaui/ui

Usage

import {
  ActionSheet,
  ActionSheetTrigger,
  ActionSheetContent,
  ActionSheetHeader,
  ActionSheetTitle,
  ActionSheetDescription,
  ActionSheetGroup,
  ActionSheetSeparator,
  ActionSheetItem,
  ActionSheetCancel,
} from "@tessinaui/ui";

<ActionSheet>
  <ActionSheetTrigger className="...">Open</ActionSheetTrigger>

  <ActionSheetContent>
    <ActionSheetHeader>
      <ActionSheetTitle>Actions</ActionSheetTitle>
      <ActionSheetDescription>Choose an action below.</ActionSheetDescription>
    </ActionSheetHeader>

    <ActionSheetGroup>
      <ActionSheetItem icon={<Share2 />}>Share</ActionSheetItem>
      <ActionSheetItem icon={<Copy />}>Copy link</ActionSheetItem>
      <ActionSheetSeparator />
      <ActionSheetItem intent="destructive" icon={<Trash2 />}>Delete</ActionSheetItem>
    </ActionSheetGroup>

    <ActionSheetCancel />
  </ActionSheetContent>
</ActionSheet>

Playground

Preview

Showcase

Preview

API Reference

ActionSheet

Root component. Provides context and wraps Base UI Dialog.Root.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Max-height of the sheet panel (50dvh / 70dvh / 90dvh)
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction applied to the panel and all children
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	—	Uncontrolled initial open state
`onOpenChange`	`(open: boolean, event: Event) => void`	—	Called when the open state changes
`dismissible`	`boolean`	`true`	Whether tapping the scrim or pressing Escape closes the sheet
`modal`	`boolean`	`true`	Whether the dialog uses modal behavior (focus trap, scroll lock)

ActionSheetContent

Renders the panel anchored to the bottom of the viewport inside a portal. Includes the backdrop scrim.

Prop	Type	Default	Description
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"md"`	Top corner rounding of the panel
`showHandle`	`boolean`	`true`	Whether to show the drag handle pill
`size`	`"sm" \| "md" \| "lg"`	—	Overrides the size from context

ActionSheetItem

Individual action button row.

Prop	Type	Default	Description
`intent`	`"default" \| "destructive"`	`"default"`	Visual intent — destructive renders in error color
`size`	`"sm" \| "md" \| "lg"`	—	Overrides the size from context
`icon`	`React.ReactNode`	—	Optional leading icon
`loading`	`boolean`	`false`	Shows a loading spinner and disables the button
`closeOnSelect`	`boolean`	`true`	Close the sheet when the action is triggered
`disabled`	`boolean`	—	Disables the item

ActionSheetCancel

Sticky cancel action at the bottom of the sheet, separated by a top border.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	—	Overrides the size from context
`children`	`React.ReactNode`	`"Cancel"`	Button label

ActionSheetHeader

Optional header section with ActionSheetTitle and ActionSheetDescription. Centered text, separated from the group by a bottom border.

ActionSheetGroup

Scrollable container for ActionSheetItem and ActionSheetSeparator rows. Grows to fill available height.

ActionSheetSeparator

Horizontal rule styled with border-border.

ActionSheetTrigger

Re-export of Dialog.Trigger. Renders a <button> that opens the sheet.

ActionSheetClose

Re-export of Dialog.Close. Renders a <button> that closes the sheet.

Behaviour

Slides up from the bottom of the viewport with a spring animation
Blocks background interaction via modal focus trap and scroll lock
Closes on: scrim tap, Escape key, ActionSheetCancel, any ActionSheetItem with closeOnSelect (default)
Sheet height is constrained by the size prop and scrolls internally when content overflows
ActionSheetCancel is always sticky at the bottom outside the scroll area

Action Sheet

On this page