MenuItem
Individual menu items for DropdownMenu and ContextMenu, with icons, shortcuts, and danger styling.
Props
MenuItem extends ButtonHTMLAttributes<HTMLButtonElement> (minus disabled, which becomes a boolean attribute).
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Menu item label. |
icon | ReactNode | — | Leading icon. |
shortcut | ReactNode | — | Trailing keyboard shortcut hint. |
highlighted | boolean | — | Highlighted/active appearance. |
disabled | boolean | — | Greyed out and non-interactive. |
danger | boolean | — | Red danger styling for destructive actions. |
onClick | () => void | — | Click handler. |
Examples
Basic menu items
With shortcuts
States
import { MenuItem } from "@solarius/onset";
import { IconTrash } from "@tabler/icons-react";
<MenuItem icon={<IconTrash size={14} />} danger onClick={handleDelete}>
Delete
</MenuItem>;