Action Sheet Design

Action sheets present a set of choices or actions related to the current context, typically appearing from the screen bottom. iOS has specific action sheet conventions through UIAlertController with action sheet style. Android addresses similar needs through bottom sheets with action lists. Design systems must specify action sheet patterns that work appropriately on each platform.

What Are Action Sheets

Action sheets present two or more choices in response to user action. Tapping a share button might present an action sheet with sharing options. Long-pressing an item might show actions available for that item. The sheet provides choices without navigating to a new screen.

iOS action sheets use UIAlertController with the .actionSheet style. Options appear in a list anchored to screen bottom on iPhone, in a popover on iPad. A cancel option provides clear dismissal.

Android does not have a dedicated action sheet component. Similar functionality comes from bottom sheets containing action lists. Material Design specifies bottom sheets with icon-and-label rows for action presentation.

How Action Sheets Work

iOS action sheet conventions present options vertically with clear labels. Destructive actions appear in red. The cancel action appears separated below other options. Tapping outside dismisses without selecting.

Action Sheet Design Patterns:

iOS Action Sheet:
- Vertical list of options
- Title and message (optional)
- Destructive actions in red
- Cancel button separated at bottom
- Tap outside to dismiss
- Popover presentation on iPad

Android Bottom Sheet Actions:
- Vertical list with icons and labels
- Optional title at top
- Dividers between groups
- Tap outside to dismiss
- Material Design styling

Common Elements:
- Clear action labels
- Icon + label preferred for clarity
- Destructive action visual treatment
- Cancel/dismiss option
- Disabled state for unavailable actions

Design Considerations:
- Maximum action count (too many = overwhelming)
- Action grouping with dividers
- Icon consistency
- Label length and truncation
- Scrolling for many actions

Android action presentation uses list items within bottom sheets. Icon and label combinations provide clear action identification. Material Design specifies minimum heights and touch targets.

Design systems bridge these patterns by specifying common action presentation requirements (clear labels, destructive styling, dismiss option) while allowing platform-appropriate implementation.

Key Considerations

• Keep action counts reasonable (3-6 typically)
• Destructive actions need visual warning (color, icon)
• Cancel/dismiss should always be available
• Icons improve quick scanning
• Consider platform presentation differences
• iPad presentation differs from iPhone

Common Questions

How many actions should an action sheet contain?

Three to six actions suit most scenarios. Users can quickly scan limited options and make choices.

More than six actions may indicate a design problem. If many actions apply, consider whether they should be grouped differently, moved to other UI locations, or presented in a different component.

Scrolling action sheets work but are not ideal. If necessary, ensure scroll affordance is clear and critical actions are visible without scrolling.

Action grouping with separators helps with more complex sheets. Related actions group together with dividers between groups.

How should destructive actions be presented?

Visual distinction warns users. Red color for destructive action text is conventional on iOS. Android may use red icons or text.

Position can indicate danger. Placing destructive actions away from likely tap targets reduces accidental activation.

Confirmation may be appropriate for significant destruction. After selecting delete, a second confirmation prevents accidents.

Clear labels describe the action. “Delete” is clearer than “Remove” for permanent data loss. Label precision helps users understand consequences.

How do action sheets differ from menus?

Action sheets present choices about the current context or object. They respond to user action and provide options for what to do.

Menus (context menus, popup menus) often appear through secondary interaction (right-click, long-press) and may include navigation options.

iOS context menus (introduced in iOS 13) differ from action sheets. Context menus appear where pressed; action sheets appear at screen bottom. Context menus support previews; action sheets do not.

Design systems should specify when to use action sheets versus other option presentation patterns.

Summary

Action sheets present contextual choices from screen bottom using platform-specific implementations. iOS provides UIAlertController action sheet style. Android uses bottom sheets with action lists. Design systems should specify clear action labeling, destructive action treatment, and reasonable action counts while accepting platform-appropriate visual presentation. Clarity and ease of choice should guide action sheet design regardless of platform.