Action sheet
Usage
Use an action sheet on a phone or tablet when a mechanic picks one action for one item: a work order's Mark done, Reassign, Print. It opens from the item's More actions button or from a long press.
- Action sheet — one-shot actions on one item, 2 to 6 of them, plus Cancel.
- Don't use it for navigation, toggles or settings (use a menu), for a form (use a modal), or to confirm a destructive action (use an alert dialog).
Content: verb + object ("Reassign mechanic", "Delete work order"). The title is the item's name when the trigger doesn't say it. Cancel is always the last row.
Anatomy
- Backdrop —
::backdropwith--color-bg-overlay - Container —
<dialog class="action-sheet">on the overlay surface, bottom edge on phones - Header (optional) —
.action-sheet__titleand.action-sheet__message - Actions —
.action-sheet__itembuttons,--dangerfor destructive ones (last) - Cancel — after
.action-sheet__separator, closes without acting
Examples
Open sheets are previewed in the page with the docs-only .is-preview class; every demo also has a real trigger that opens it in the top layer with commandfor/command="show-modal", without JavaScript.
Action sheet
Open: anchored to the bottom on phones (resize below 40rem), a centered card on wider screens.
A title and message name the item the actions apply to when the trigger doesn't.
The destructive action is last, in danger text, and never focused first: focus starts on Cancel.
<button type="button" class="icon-btn" commandfor="wo-actions" command="show-modal" aria-label="More actions for WO-4182">…</button>
<dialog id="wo-actions" class="action-sheet" aria-labelledby="wo-actions-title" closedby="any">
<div class="action-sheet__header"><h2 class="action-sheet__title" id="wo-actions-title">WO-4182</h2></div>
<button type="button" class="action-sheet__item" commandfor="wo-actions" command="close">Duplicate</button>
<button type="button" class="action-sheet__item action-sheet__item--danger" commandfor="wo-actions" command="close">Delete work order</button>
<hr class="action-sheet__separator">
<button type="button" class="action-sheet__item action-sheet__cancel" commandfor="wo-actions" command="close" autofocus>Cancel</button>
</dialog>API
| Hook | Values | Purpose |
|---|---|---|
<dialog class="action-sheet"> | block | The sheet; open with command="show-modal" |
.action-sheet__item (+ --danger) | part | One action; each closes the sheet with command="close" |
.action-sheet__header | __title | __message | __separator | __cancel | parts | See anatomy |
closedby="any" | attribute | Backdrop tap closes it (no data is lost) |
autofocus | attribute | On Cancel when a destructive action is present |
.is-preview | docs-only class | Render an open sheet in the page flow |
Do and don't
"Delete work order" last, in danger text, with focus starting on Cancel.
A sheet with "Settings", "Dark mode" and "Help".
Accessibility
| Key | Behavior |
|---|---|
| Tab / Shift+Tab | Moves between the actions and Cancel; the page behind is inert |
| Enter / Space | Runs the focused action and closes the sheet |
| Esc | Closes without acting (same as Cancel) |
- Role: native
<dialog>opened withshowModal()(via the invoker): top layer, inert background, Esc. Named by the title or byaria-label. - Focus: moves to the first action, or to Cancel (
autofocus) when a destructive action is present. On close the browser returns focus to the trigger. - Targets: every row is at least
--size-touch-targettall and full width. - Destructive actions are named in text ("Delete work order"), not by color alone (WCAG 1.4.1).
- Reduced motion: the slide is removed by
base.css. Forced colors: the sheet keeps aCanvasTextborder.
Tokens
| Custom property | Purpose |
|---|---|
--color-elevation-surface-overlay | Sheet surface |
--overlay-radius, --overlay-shadow | Corners and elevation |
--color-bg-overlay | Backdrop scrim |
--color-feedback-danger-fg | Destructive action text |
--color-border-subtle | Separator above Cancel |
--size-touch-target | Row height |
--motion-duration-base | -fast, --motion-easing-enter | -exit | Slide in and out |