Fluxo UIFluxo UIv0.4.93

Action Sheet

A bottom-aligned modal list of actions — ideal for mobile context menus, sharing flows, and confirmations.

Basic Usage

Tap to open

Each action runs its onSelect handler and the sheet auto-closes.

Last action: —
import { ActionSheet, Button } from 'fluxo-ui';

const [open, setOpen] = useState(false);

<Button label="Share…" onClick={() => setOpen(true)} />
<ActionSheet
    open={open}
    onClose={() => setOpen(false)}
    title="Share photo"
    actions={[
        { label: 'Copy link', onSelect: copyLink },
        { label: 'Save to Files', onSelect: save },
        { label: 'Delete', destructive: true, onSelect: remove },
    ]}
/>

Variants

iOS variant

Centered actions card with a separate cancel pill — the default.

<ActionSheet
    open={open}
    onClose={close}
    variant="ios"
    actions={[
        { label: 'Reply', onSelect: reply },
        { label: 'Forward', onSelect: forward },
    ]}
/>

Material variant

Edge-to-edge bottom sheet with left-aligned rows.

<ActionSheet
    open={open}
    onClose={close}
    variant="material"
    title="Add new"
    actions={[
        { label: 'New folder', onSelect: ... },
        { label: 'New document', onSelect: ... },
    ]}
/>

Plain variant

Merges the cancel button into the same card.

<ActionSheet
    open={open}
    onClose={close}
    variant="plain"
    actions={[
        { label: 'Mark as read', onSelect: ... },
        { label: 'Archive', onSelect: ... },
    ]}
/>

States

Destructive & disabled

Mark a single action as destructive for the danger color, disabled for non-interactive rows, and add a description for context.

<ActionSheet
    open={open}
    onClose={close}
    title="Account"
    actions={[
        { label: 'Switch account' },
        { label: 'Sign out', destructive: true, onSelect: signOut },
        { label: 'Delete account', destructive: true, disabled: true, description: 'Pending verification' },
    ]}
/>

With Icons

Actions with icons

Pair each label with an icon — works for all variants.

<ActionSheet
    open={open}
    onClose={close}
    actions={[
        { label: 'Share', icon: <ShareIcon /> },
        { label: 'Copy link', icon: <CopyIcon /> },
        { label: 'Download', icon: <DownloadIcon /> },
        { label: 'Delete', icon: <TrashIcon />, destructive: true },
    ]}
/>

Import

import { ActionSheet } from 'fluxo-ui';
import type { ActionSheetProps, ActionSheetAction, ActionSheetStyle } from 'fluxo-ui';

Props

openreq
boolean

Whether the action sheet is visible.

onClosereq
() => void

Called when the sheet should close (backdrop tap, Escape, cancel, or after a selection).

title
ReactNode

Optional short title rendered at the top of the actions group.

message
ReactNode

Optional supporting message rendered under the title.

actionsreq
ActionSheetAction[]

Action items. Each item: { key?, label, description?, icon?, disabled?, destructive?, onSelect? }.

cancelLabel
string"'Cancel'"

Label for the cancel button.

showCancel
boolean"true"

Show the standalone cancel button below the actions group.

onCancel
() => void

Called when the cancel button is tapped, before onClose.

variant
'ios' | 'material' | 'plain'"'ios'"

Visual variant. 'ios' centers items in a rounded card with a separate cancel pill; 'material' is a flush bottom sheet with left-aligned items; 'plain' merges actions and cancel into one card.

closeOnSelect
boolean"true"

Auto-close after an action is selected.

closeOnBackdropClick
boolean"true"

Close on backdrop tap.

closeOnEscape
boolean"true"

Close when Escape is pressed.

safeArea
boolean"true"

Apply env(safe-area-inset-bottom) so the sheet clears the iOS home indicator.

className
string

Additional CSS class for the sheet root.

ariaLabel
string

Accessible name for the dialog. Defaults to the title text if it's a string.

Features

iOS, Material, Plain

Three visual variants covering both iOS and Android conventions plus a merged-list option.

Destructive & disabled rows

Each action can be marked destructive, disabled, or paired with a description line.

Safe-area-aware

Bottom padding respects env(safe-area-inset-bottom) so the sheet clears the iOS home indicator.

Keyboard & focus

Escape closes, focus is trapped while open, and focus is restored to the trigger on close.

Backdrop & escape control

closeOnBackdropClick and closeOnEscape props let you tune dismissal behavior.

Theme-driven colors

Surfaces and text use --eui-* variables — works across every brand theme and dark mode automatically.