ActionSheet
A short list of choices that slides up from the bottom.
Offline sync for tasks
Jonas · Eng
Harbour homepage
Maya · Design
Nothing chosen yet.
In context
Offline sync for tasks
Jonas · Eng
Harbour homepage
Maya · Design
Offline sync for tasks
Export shift pattern
Leo · Ops
Offline sync for tasks
Jonas · Eng
48 shifts, 6 crew
Info, divider, link, loading
Ask
- Why do Catholics confess to a priest?2 hours ago
- Is it a sin to miss Mass when I am sick, or when I am up all night caring for a newborn?Yesterday
- Explain todayΓÇÖs Gospel3 days ago
Props
| Prop | Type | Required | Default |
|---|---|---|---|
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
trigger | ReactNode | No | — |
title | ReactNode | No | — |
actions | ActionSheetAction[] | undefined | No | — |
items | ActionSheetAction[] | undefined | No | — |
cancelLabel | string | null | undefined | No | Cancel |
appearance | "default" | "popup" | undefined | No | — |
container | HTMLElement | null | undefined | No | — |
closeOnSelect | boolean | undefined | No | true |
dismissible | boolean | undefined | No | true |
Accessibility
Built on the same Drawer/Radix Dialog wiring as BottomSheet: focus trapped while open, Esc and backdrop click close it. Every action is a real, full-width button at least 44px tall; selecting one (or Cancel) closes the sheet after its onSelect. The handle is a real drag surface, never the only way out.
data-rebar-* attributes
data-rebar-component="action-sheet" on the panel; data-rebar-part="actions" on the list, "action" per button, "cancel" on the dismiss button.
Migrating to Ant Design
AntD has no direct equivalent (an action sheet is a mobile-native pattern). The closest antd building block is a Dropdown menu, which loses the bottom-anchored layout and the separate Cancel row.
appearance="popup", cancelLabel={null}
appearance="popup" renders plain left-aligned text rows (info line with a hairline, destructive in --rebar-popup-danger); cancelLabel={null} omits the Cancel button; closeOnSelect={false} keeps the menu open under a follow-up.