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.

Playground

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>

Examples

Default

A trigger button that opens a bottom sheet with a group of actions and a cancel row.

With Header

Add an ActionSheetHeader with a title and description above the actions.

Destructive Actions

Mark dangerous actions with intent="destructive", separated from the rest by a divider.

Sizes

Three max-height presets — sm (50dvh), md (70dvh), and lg (90dvh).

Rounded

Five top corner-rounding options via the rounded prop on ActionSheetContent.

Loading

Use ActionSheetSkeleton as a placeholder while sheet content loads.

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

Playground

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>

Examples

Default

A trigger button that opens a bottom sheet with a group of actions and a cancel row.

With Header

Add an ActionSheetHeader with a title and description above the actions.

Destructive Actions

Mark dangerous actions with intent="destructive", separated from the rest by a divider.

Sizes

Three max-height presets — sm (50dvh), md (70dvh), and lg (90dvh).

Rounded

Five top corner-rounding options via the rounded prop on ActionSheetContent.

Loading

Use ActionSheetSkeleton as a placeholder while sheet content loads.

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

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

Action Sheet

On this page