Skip to main content

Interface: MenuItemProps

Defined in: composites/Menu/Menu.tsx:250

Props for the MenuItem component.

Extends​

  • Omit<RACMenuItemProps, "style" | "children" | "className">

Properties​

children?​

optional children?: ReactNode

Defined in: composites/Menu/Menu.tsx:300

Item content.

composition?​

optional composition?: "primaryAction" | "secondaryAction" | "dismissAction"

Defined in: composites/Menu/Menu.tsx:296

Optional composition slot when this item plays a named role inside the parent Menu (e.g. primaryAction, dismissAction). Emitted as data-composition so parents can target it with layout CSS (ordering, separation).

consequence?​

optional consequence?: "neutral" | "committing" | "destructive"

Defined in: composites/Menu/Menu.tsx:289

Effect on state that activating this item produces.

Emitted as data-consequence on the rendered element so callers, tests, and host integrations (confirm wrappers, telemetry) can observe the contract.

destructive also tints the row's ink — see resolveConsequenceInk for the rule and its bounds. The row keeps the quiet rung's geometry and fill; only the ink (and, through currentColor, any Icon inside it) carries the valence.

Default​

'neutral'

evaluation?​

optional evaluation?: "primary" | "secondary" | "accent" | "muted" | "negative"

Defined in: composites/Menu/Menu.tsx:274

Semantic emphasis for the item. muted is the default and the only rung that makes sense at rest: a menu row must show no fill until it is hovered, and the quiet rung's resting background resolves to exactly the popover's own colour in both modes (neutral.0 / neutral.900), so the row borrows the surface and materialises on hover.

It used to default to primary, which after the P3 retune painted every row as a solid neutral.1000 chip in light and a solid white one in dark — a menu that read as a stack of buttons. The default was never inspected with an open menu.

Reach for another rung only to make one row louder than its siblings (a primary "Create…" at the top of a menu). To mark a destructive row, leave this alone and set consequence — negative fills the row solid red because in action the valence is the filled destructive command, which is a different thing from a peer row that happens to delete something.

Default​

'muted'