Action Sheets

An action sheet is a Sheet anchored to the bottom edge, presenting a short list of choices the way a mobile operating system does. There is no separate component: you compose it from the same Sheet primitives and pass side="bottom" to SheetContent. Reach for this pattern on touch-first and native-shaped layouts where actions should rise from the bottom of the screen under the user’s thumb.

Live demo

The interactive story below runs from the deployed Storybook. It is the default Sheet story; pass side="bottom" in your own code to get the action-sheet placement.

Usage

Source: sheet.tsx

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetClose,
  Button,
} from "@beacon/design-system";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">More actions</Button>
  </SheetTrigger>
  <SheetContent side="bottom">
    <SheetHeader>
      <SheetTitle>Choose an action</SheetTitle>
    </SheetHeader>
    <div className="grid gap-2 py-4">
      <SheetClose asChild>
        <Button variant="ghost" className="justify-start">Share</Button>
      </SheetClose>
      <SheetClose asChild>
        <Button variant="ghost" className="justify-start">Duplicate</Button>
      </SheetClose>
      <SheetClose asChild>
        <Button variant="ghost" className="justify-start text-destructive">Delete</Button>
      </SheetClose>
    </div>
  </SheetContent>
</Sheet>

Parts

The action sheet uses the standard Sheet parts. See the full table on the Sheets page. The only difference is the side prop on SheetContent:

Part	Role
SheetContent with side="bottom"	Anchors the panel to the bottom edge so it rises like a native action sheet.
SheetClose	Wrap each action with asChild so picking it closes the sheet.

When to use

• Touch-first or native-shaped layouts where a short choice list should appear from the bottom.
• A compact menu of actions tied to a specific item, presented modally.

Do not reach for a separate action-sheet component: there is none. Compose a Sheet with side="bottom". For a list of menu commands anchored to a trigger on the web, prefer a dropdown menu instead.