ActionSheet

Stable
WCAG 2.2 evidence
RTL

An iOS-style sheet of actions that slides up from the bottom, with a separate Cancel row. Built on React Aria ModalOverlay + Modal + Dialog around a Menu of ActionSheetItems: focus moves to the first action on open; the arrow keys, Home/End and type-ahead move between actions; Enter or a tap runs one and closes the sheet; Tab reaches Cancel; Escape, Cancel or a tap on the scrim close it; focus returns to the trigger; the rest of the page is inert meanwhile (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2). The slide only runs when motion is allowed (2.3.3). Consumer duties: an accessible name, item wording, destructive actions last and labelled by text. On web and Android use Menu or BottomSheet instead (spec "When to avoid").

import { ActionSheet } from "@nexera-ui/react";

Loading example…

3
examples: 18
props: 2
live controls: 1
platform: 7
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isDismissabletrue

defaultOpenfalse

Generated code

import { ActionSheet } from "@nexera-ui/react";

<ActionSheet />

Examples 2

The same examples as Storybook, rendered live. Open Code to copy one.

Long labels

Long labels wrap inside their rows.

Loading example…

app.tsx

import { ActionSheet, ActionSheetItem, Button } from "@nexera-ui/react";

<ActionSheet
  aria-label="Payslip"
  trigger={<Button platform="ios">Change photo</Button>}
  defaultOpen
>
  {[
    <ActionSheetItem
      key="mail"
      id="mail"
      label="Send the October payslip to the employee's personal email address"
    />,
    <ActionSheetItem key="print" id="print" label="Print" />,
    <ActionSheetItem
      key="void"
      id="void"
      label="Void the payslip and recalculate the payroll"
      type="destructive"
    />,
  ]}
</ActionSheet>;

Right to left

Right-to-left: icons sit to the right of the labels.

Loading example…

app.tsx

import { ActionSheet, ActionSheetItem, Button } from "@nexera-ui/react";
import { LuSparkles, LuTrash2 } from "react-icons/lu";

<ActionSheet
  aria-label="صورة الملف الشخصي"
  trigger={<Button platform="ios">تغيير الصورة</Button>}
  defaultOpen
  cancelLabel="إلغاء"
>
  {[
    <ActionSheetItem key="take" id="take" label="التقاط صورة" icon={<LuSparkles />} />,
    <ActionSheetItem
      key="remove"
      id="remove"
      label="إزالة الصورة"
      type="destructive"
      icon={<LuTrash2 />}
    />,
  ]}
</ActionSheet>;

Props 18

Press "Try it" on a card to load that prop into the playground.

onActionNexera

(key: Key) => void

Called with the item's id when an action is chosen (Enter, Space, a tap); the sheet then closes and focus returns to the trigger.

cancelLabelNexera

string

Label of the separate cancel row. It closes the sheet. Translate it for your locale.

isDismissableNexera

boolean

Whether a tap on the scrim closes the sheet (like Cancel).

idNexera

string

Id of the surface element.

classNameNexera

string

Extra classes for the surface, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the surface.

triggerNexera

ReactElement<unknown, string | JSXElementConstructor<any>>

The element that opens the overlay, usually a Nexera Button. It toggles the overlay when pressed and gets focus back when the overlay closes. Leave it out to open the overlay from your own state (isOpen + onOpenChange).

isOpenNexera

boolean

Whether the overlay is open (controlled). Use with onOpenChange.

defaultOpenNexera

boolean

Whether the overlay is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the overlay opens or closes (Escape, the close button, a slot="close" action, a click outside).

aria-labelNexera

string

Accessible name of the sheet and its list of actions ("Profile photo"). Translate it.

aria-labelledbyNexera

string

Id of a visible element that names the sheet.

childrenReact Aria

ReactNode | ((item: T) => ReactNode)

The contents of the collection.

itemsReact Aria

Iterable<T>

Item objects in the collection.

disabledKeysReact Aria

Iterable<Key>

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

dependenciesReact Aria

readonly any[]

Values that should invalidate the item cache when using dynamic collections.

shouldCloseOnInteractOutsideReact Aria

(element: Element) => boolean

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

isKeyboardDismissDisabledReact Aria

boolean

Whether pressing the escape key to close the modal should be disabled.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.1.2No Keyboard TrapLevel A · tested directly
2.3.3Animation from InteractionsLevel AAA · supporting test
2.4.3Focus OrderLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-entering
data-exiting

Usage

<ActionSheet className="data-entering:opacity-90 shadow-sm" />

Used in blocks

Action sheetMobile patterns

Theme studio

ActionSheet

Try every prop. Copy the code.

Examples 2

Long labels

Right to left

Props 18

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components