Action sheet or drawer?

A drawer holds content someone reads or edits: a filter form, a details panel, a settings list. An action sheet holds three to seven actions that each run and close. If someone needs to compare the panel against the page behind it, use a drawer.

Action sheet or menu?

Same list of actions, a different entry point and position. A menu opens from a trigger near the object. An action sheet rises from the bottom of the screen on a phone, where a thumb can reach every row. On desktop, a menu from three dots is often enough.

Does an action sheet need a Cancel button?

On iOS, yes: a separate row below the sheet panel, visually detached from the actions. It does the same job as tapping outside, but reads clearer on a small screen. Android often relies on the backdrop tap alone.

Where do destructive actions go?

Below a divider, painted in the destructive colour. Colour alone fails WCAG 1.4.1, so the position and the divider carry part of the signal. For anything that cannot be undone, the row should open a confirmation step.

Should a bottom sheet close on drag?

On a touch screen, yes. Dragging the panel down past roughly one third of its height should close it. Under prefers-reduced-motion, snap closed rather than animating the drag.

Action sheet

An action sheet slides up from the bottom of the screen with a short list of choices. iOS puts Share and Delete there because a thumb can reach the bottom edge on a phone.

OverlaysBuild difficulty: Medium<div role="dialog" aria-modal="true">

Also called Bottom sheet actions, Share sheet, Mobile action menu.

Open the sheet, pick an action, or press Escape to close. On a phone this pattern sits where a thumb can reach every row.

For designers

An action sheet is a menu that comes from the bottom of the phone screen, where a thumb can reach every row. iOS puts Share, Save to Files, and Delete behind one sheet because those actions belong to the thing on screen, not to the whole app.

The cost is screen height. A sheet covering more than half the viewport hides the context it acts on, which is the one advantage it has over a centered modal. Keep the list short, cap it at seven rows, and let the page behind stay visible through a dimmed backdrop so someone can confirm they picked the right invoice before tapping Delete.

Use an action sheet when

Three to seven actions belong to one object on a narrow screen
The actions run immediately and the panel should close after one tap
A thumb needs to reach every row without stretching across the screen

Reach for something else when

The content is a form, a filter panel, or anything that needs to stay open while someone reads the page behind it. Use a drawer instead.
The list opens from a three-dot trigger on desktop and has fewer than six items. Use a menu instead.
The task needs a confirmation step with more than one field. Use a modal instead.
Every item takes someone to a different page rather than running an action. Use a list instead.

Variants

Standard

Copy link
Share
Print
Delete

With title

Invoice #1042

Acme Corp · £4,200

Copy link
Share

Cancel row

Cancel

Standard rows for safe actions, a title naming the object, and a Cancel row below the panel on iOS.

Standard. Three to six actions in a vertical list, each a full-width row. Copy link, Share, and Print in a cluster, Delete separated below a divider.

With title. A headline naming the object, like Invoice #1042, so someone confirms they are acting on the right thing before tapping a row.

Cancel row. A separate button below the sheet panel, iOS style, for people who opened it by mistake. It does the same job as tapping outside, but reads clearer on a small screen.

How to build a action sheet

Use a bottom-positioned dialog. The WAI-ARIA Authoring Practices describe the same pattern for a modal dialog anchored to an edge.

<div role="dialog" aria-modal="true" aria-labelledby="sheet-title">
  <h2 id="sheet-title">Share photo</h2>
  <button type="button">Copy link</button>
  <button type="button">Save image</button>
  <hr>
  <button type="button">Delete</button>
</div>

Focus moves inside on open and returns to the trigger on close. Escape and a backdrop tap should both dismiss, unless the action would lose unsaved work. A bottom sheet on a touch screen can also close when someone drags the panel down past roughly one third of its height. Each row is a button, not a link, because choosing one runs an action rather than navigating away. Target size for each row should clear 44 by 44 CSS pixels, which on iOS is the minimum Apple documents for touch targets.

Edge cases

Desktop. A bottom sheet still works, but a menu from a three-dot trigger is often enough when the pointer can reach a small target. Reserve the sheet for narrow viewports.

Destructive actions. Separate Delete from safe actions with a divider, and paint it in the destructive colour. Colour alone fails WCAG 1.4.1, so the position and the divider do part of the work.

Too many rows. Past seven items, group related actions or move rare ones into a second step. A sheet that scrolls reads as a list page wearing a sheet's clothes.

Common questions

Action sheet or drawer?: A drawer holds content someone reads or edits: a filter form, a details panel, a settings list. An action sheet holds three to seven actions that each run and close. If someone needs to compare the panel against the page behind it, use a drawer.
Action sheet or menu?: Same list of actions, a different entry point and position. A menu opens from a trigger near the object. An action sheet rises from the bottom of the screen on a phone, where a thumb can reach every row. On desktop, a menu from three dots is often enough.
Does an action sheet need a Cancel button?: On iOS, yes: a separate row below the sheet panel, visually detached from the actions. It does the same job as tapping outside, but reads clearer on a small screen. Android often relies on the backdrop tap alone.
Where do destructive actions go?: Below a divider, painted in the destructive colour. Colour alone fails WCAG 1.4.1, so the position and the divider carry part of the signal. For anything that cannot be undone, the row should open a confirmation step.
Should a bottom sheet close on drag?: On a touch screen, yes. Dragging the panel down past roughly one third of its height should close it. Under prefers-reduced-motion, snap closed rather than animating the drag.

Last reviewed 27 AUG 2026