Menu button

A button that opens a popover menu. Aligned with J&J DS v1.2 — pill-shaped trigger with an end chevron that flips on open. Three sizes (32 / 40 / 48) and two placements (bottom / top). For a one-shot action use a Button; for a primary action paired with secondary options use a SplitButton.

Sizes

32 / 40 / 48 px tall. The dropdown panel widths are 160 / 180 / 240 px respectively, matching the Figma spec.

Show source

<MenuButton size="sm" label="Actions" items={items} />
<MenuButton size="md" label="Actions" items={items} />
<MenuButton size="lg" label="Actions" items={items} />

Placement — bottom (default) and top

Set placement='top' for triggers near the bottom of the viewport. The chevron animates in either direction.

Show source

<MenuButton label="Open below" items={items} placement="bottom" />
<MenuButton label="Open above" items={items} placement="top" />

Variants — primary (brand red) and primaryAlt (warm-dark)

Brand red is the default per Figma. Warm-dark fits non-brand contexts (e.g. dashboards, internal tools) without overpowering the page.

Show source

<MenuButton label="Brand" items={items} />
<MenuButton label="Warm-dark" items={items} variant="primaryAlt" />

Items — links, destructive, and disabled

Each item accepts onClick, href (renders an anchor), disabled, and destructive (renders in error red).

Show source

<MenuButton
  label="More"
  items={[
    { label: "Open in new tab", href: "https://www.jnj.com" },
    { label: "Edit", onClick: () => undefined },
    { label: "Pinned", disabled: true },
    { label: "Delete", destructive: true, onClick: () => undefined },
  ]}
/>

Disabled trigger

When disabled, the trigger is non-interactive and uses the standard button-disabled token.

Show source

<MenuButton label='Actions' items={items} disabled />