Action Sheet
ProA mobile-friendly bottom sheet that slides up from the bottom of the viewport, presenting a list of contextual actions. Designed for touch interaction with large tap targets and swipe-to-dismiss. Includes a drag handle, vertically stacked action items, a cancel button, and an optional destructive action styled in danger red. Optimised for iOS and Android patterns for share menus, file actions, and context-dependent choices.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard action sheet with a list of action items and a cancel button. | Use on mobile for contextual actions — share, copy, move, delete. |
| With Cancel |
Usage Guidelines
Include a cancel action that dismisses the sheet without performing any action.
Use on desktop where a Dropdown Menu or Context Menu is more appropriate.
Support swipe-down gesture to dismiss on touch devices.
Include more than 6-8 actions — simplify or restructure the choices.
Use large touch targets — minimum 48px height for each action item.
Omit the cancel button — users need a clear way to dismiss.
Separate destructive actions visually from the rest of the list.
Auto-dismiss after an action without confirmation for destructive operations.
Code
Design Tokens
Accessibility
- Use role="dialog" with aria-modal="true".
- Focus must be trapped within the action sheet while open.
- On open, move focus to the first action item.
- On close, return focus to the element that triggered the sheet.
- Provide aria-labelledby if a title is present.
- Swipe-to-dismiss should be supplemented with a visible cancel button for accessibility.