ActionSheetItem

Stable
WCAG 2.2 evidence
RTL

One action in an ActionSheet. Built on React Aria MenuItem: role menuitem; the arrow keys, Home/End and type-ahead move focus; Enter and Space run it and close the sheet; disabled items are skipped (WCAG 2.1.1, 4.1.2). Keyboard focus shows the focus ring inside the row (2.4.7). Rows are at least 56 pt tall (2.5.8). Consumer duties: item wording; destructive actions last.

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

Loading example…

5
examples: 25
props: 2
live controls: 1
platform: 8
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…

label

isDisabledfalse

Generated code

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

<ActionSheetItem />

Examples 4

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

Destructive

Figma Type=Destructive: the danger colour; the label says what happens.

Loading example…

app.tsx

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

<ActionSheetItem id="remove" label="Remove photo" icon={<LuTrash2 />} type="destructive" />;

Cancel

Figma Type=Cancel: bold, without a hairline (the ActionSheet renders its own cancel row).

Loading example…

app.tsx

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

<ActionSheetItem id="cancel" label="Cancel" icon={<LuSparkles />} type="cancel" />;

Disabled

Disabled: skipped by the arrow keys, inactive colour.

Loading example…

app.tsx

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

<ActionSheetItem id="take" label="Take photo" icon={<LuSparkles />} isDisabled />;

Long label

Long labels wrap; the row grows from its 56 pt minimum.

Loading example…

app.tsx

import { ActionSheetItem } from "@nexera-ui/react";
import { LuImage } from "react-icons/lu";

<ActionSheetItem
  id="take"
  label="Save this photo to the shared album of the whole payroll and finance team"
  icon={<LuImage />}
/>;

Props 25

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

label*Nexera

ReactNode

Visible label. Start with a verb ("Take photo"). It names the item and wraps instead of truncating. When it is not a plain string, also pass textValue so type-ahead can find the item.

iconNexera

ReactNode

Icon before the label. Decorative: the label names the item.

typeNexera

"default" | "destructive" | "cancel"

Row type. destructive uses the danger colour; the label must still say what happens ("Remove photo"), because colour alone is not enough (WCAG 1.4.1). cancel is the bold row of the separate cancel group, which ActionSheet renders for you.

classNameNexera

string

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

styleNexera

CSSProperties

Inline style.

idReact Aria

Key

The unique id of the item.

valueReact Aria

T

The object value that this item represents. When using dynamic collections, this is set automatically.

textValueReact Aria

string

A string representation of the item's contents, used for features like typeahead.

aria-labelReact Aria

string

An accessibility label for this item.

isDisabledReact Aria

boolean

Whether the item is disabled.

onActionReact Aria

() => void

Handler that is called when the item is selected.

shouldCloseOnSelectReact Aria

boolean

Whether the menu should close when the menu item is selected.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

* 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

4 direct · 4 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
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-disabled
data-focused
data-hovered
data-pressed

Usage

<ActionSheetItem className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Action sheetMobile patterns

Theme studio

ActionSheetItem

Try every prop. Copy the code.

Examples 4

Destructive

Cancel

Disabled

Long label

Props 25

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components