ActionSheet
A short list of choices about one thing, from the bottom edge, with Cancel focused first.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Alert dialog
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Open
Tokens
The 16 design tokens ActionSheet reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 16 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.muted | … | --sd-color-bg-muted |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.subtle | … | --sd-color-border-subtle |
| color.text.brand | … | --sd-color-text-brand |
| color.text.danger | … | --sd-color-text-danger |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| dialog.bg | … | --sd-dialog-bg |
| dialog.fg | … | --sd-dialog-fg |
| dialog.radius | … | --sd-dialog-radius |
| dialog.scrim | … | --sd-dialog-scrim |
| elevation.3 | … | --sd-elevation-3 |
| layer.modal | … | --sd-layer-modal |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.sm | … | --sd-spacing-inset-sm |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/action-sheetThen import it
import { ActionSheet, ActionSheetTrigger } from "@/components/ui/action-sheet"Props
| Prop | Type | What it does |
|---|---|---|
titlerequired | string | Required: names the sheet (shown as its heading). |
description | ReactNode | |
actionsrequired | ActionSheetAction[] | |
onAction | (id: string) => void | |
cancelLabel | stringDefault 'Cancel' | Label of the cancel button. Default "Cancel". |
isOpen | boolean | |
onOpenChange | (isOpen: boolean) => void |
When to use it
Use it for
- Mobile options for one item (share, duplicate, delete)
Use something else for
- Forms or long content: use BottomSheet
- Desktop row actions: use Menu
Accessibility
Screen readers announce "Sprint plan, alert dialog" then "Cancel, button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Offer undo after a destructive choice
Shared patterns it ships with: 3.3.6 (destructive choices pair with undo or a confirmation).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 40 text runs: 0 below 7:1, lowest 8.4:1 |
| Target size | 12 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the trigger |
| Enter | Enter opens the sheet with focus on Cancel (the least destructive choice) |
| Shift+Tab | Shift+Tab reaches Delete |
| Escape | Esc cancels and returns focus |
In Figma
The Figma component is ActionSheet. The Figma library isn’t published yet.
Figma to code: Title → title; Description → description when Show description; Cancel label → cancelLabel; nested Action → actions.