Skip to main content
Overlay

Action sheet

Service-launched **action sheet** — a data-driven, iOS-style list of actions presented in a bottom sheet. Inject `KjActionSheetService` and call `open()` with a list of actions; selecting one resolves its `value`. Built entirely on the bottom-sheet primitive, so it inherits the same focus trap, scroll lock, drag-to-dismiss, and Escape handling. The wrapper component exists to host this documentation page.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjActionSheetComponent } from '@kouji-ui/components';
04

Playground

#playground
actionSheet.open({
  title: 'Photo',
  actions: [
    { label: 'Edit', value: 'edit' },
    { label: 'Duplicate', value: 'duplicate' },
    { label: 'Delete', value: 'delete', role: 'destructive' },
  ],
});