Skip to main content

Action Sheet

iOS-style bottom sheet for contextual actions.

Selectors

dialog.action-sheet
Bottom-anchored modal sheet. Slides up from the bottom of the screen.
.action-sheet-group
Rounded group of action buttons. Separate groups are spaced apart (e.g. cancel button in its own group).
.action-sheet-header
Optional title/message area at the top of a group.
.action-sheet-title
Title text inside the header.
.action-sheet-message
Descriptive text inside the header.
.action-sheet-destructive
Modifier on a button to style it as a destructive action (red).
.action-sheet-cancel
Modifier on the cancel button for bolder weight.
data-no-dismiss
Prevents a button from auto-closing the action sheet when clicked (requires js/cider.js).

Default
HTML 
<button onclick="openActionSheet(document.getElementById('sheet1'))" class="btn-tinted">Share Photo</button>

<dialog id="sheet1" class="action-sheet">
  <div class="action-sheet-group">
    <button>
      Share via Messages
    </button>
    <button>
      Copy Link
    </button>
    <button class="action-sheet-destructive">
      Delete Photo
    </button>
  </div>
  <div class="action-sheet-group">
    <button class="action-sheet-cancel">Cancel</button>
  </div>
</dialog>

With Header

Remove this item?
This action cannot be undone.
HTML 
<button onclick="openActionSheet(document.getElementById('sheet2'))" class="btn-tinted">Delete Item</button>

<dialog id="sheet2" class="action-sheet">
  <div class="action-sheet-group">
    <div class="action-sheet-header">
      <div class="action-sheet-title">Remove this item?</div>
      <div class="action-sheet-message">This action cannot be undone.</div>
    </div>
    <button class="action-sheet-destructive">
      Delete
    </button>
    <button>
      Archive Instead
    </button>
  </div>
  <div class="action-sheet-group">
    <button class="action-sheet-cancel">Cancel</button>
  </div>
</dialog>

Usage

Adds slide-up/down animation, backdrop click to dismiss, button auto-close, focus trapping, scroll lock, and focus restoration.

  • Clicking any button inside .action-sheet-group auto-closes the sheet.
  • Add data-no-dismiss to a button to prevent auto-closing on click.
  • Escape key and backdrop click also dismiss the sheet.
<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

API

openActionSheet(dialogElement)
Opens the action sheet as a modal. Guards against re-opening an already-open or closing sheet.
closeActionSheet(dialogElement)
Closes the action sheet with a slide-down animation, restoring focus and scroll position.

Both functions are available as globals and via CiderUI.actionSheet.open() / CiderUI.actionSheet.close().

Accessibility

  • Uses native <dialog> for built-in modal semantics.
  • Focus is trapped inside the sheet while open; cancel button is preferred for initial focus.
  • Escape closes the sheet. Backdrop click also dismisses.
  • Focus is restored to the triggering element on close.
  • Scroll is locked on the body while the sheet is open.