PDS proposals
← All proposals

Agentic Menu Button

A separate component, `AgenticMenuButton`, for a menu of actions the agent does:

Net-new componentOpen in Storybook

proposals/AgenticMenuButton/HANDOFF.md59 lines · View on GitHub

Handoff: Agentic Menu Button

What and why

A menu of actions the agent does. It is the PDS MenuButton with the trigger fixed: the Agentic Button (the secondary look with the AI gradient border) in label mode, and an Icon Button with variant='agentic' when iconOnly. It is a separate component (decided 2026-10-21), not an isAgentic option of the MenuButton, which went back to plain PDS (keeping its own isSelected). It has no variant: there is one look.

  • Figma / Jira: none. Source: the designer's decision in design review.
  • Context: context.md

Exploration and decisions

  • A copy of the Menu Button component with a fixed trigger, not a wrapper: wrapping would need the Menu Button to take a custom trigger, which is a new prop on it. It reuses the Menu Button's CSS and NavAccordion, and adds the class pds-agentic-menu-button to the root.
  • variant and isAgentic removed. The navbar, subtle and reverse-secondary triggers have no agentic look and are out of scope.
  • Icon-only open state: a small CSS override (agentic-menu-button.css) so the open state still shows a fill on top of the gradient border.
  • Used by Labeled Divider: its selector uses this for the agentic tones and the plain MenuButton for neutral.

Full list: decisions.md.

API

The Menu Button props (menuItems, label, iconOnly, iconName, size, tally, statusDot, disabled, placement, onClick, onOpenChange, isMobileAccordion, undefinedLabel, testId, id, ...) except variant and isAgentic. See the Menu Button handoff.

Variants and states: label and icon-only triggers; sizes xs, s, m; with tally and status dot (label mode); disabled; open. Stories: Default, Icon Only, With Tally, With Status Dot.

Tokens used

  • --pds-color-button-secondary-background-active (the icon-only open state)
  • --pds-z-index-dropdown

The rest is the Menu Button's, the Agentic Button's and the Icon Button's.

Impact

From impact.md: no existing PDS component is reached. One opt-in rule targets the agentic Icon Button's open state. Proposals that build on it: LabeledDivider (its agentic selector).

Reused vs net-new

  • Reused: the Menu Button's markup, CSS and NavAccordion; the package's useDropdown, useIsMobile, Icon, Tally; the local AgenticButton and IconButton (variant='agentic').
  • Net-new: .pds-agentic-menu-button, and the props of AgenticMenuButtonProps. See custom.md (one custom variable, no raw values).

Accessibility

  • Unchanged from the Menu Button: aria-haspopup, aria-expanded, the listbox menu, keyboard navigation, typeahead and focus handling; the icon-only trigger has an accessible name.
  • The gradient border is decorative.
  • The a11y panel has not been run, and light and dark were not checked by eye in a session.

Decisions and open questions

  • The copy repeats the Menu Button's logic (about 850 lines). Should the port instead let the Menu Button take a trigger, with the agentic menu a thin wrapper?
  • Should the agentic menu offer the mobile accordion? It is copied as is.

Port notes

  • New component. Port AgenticButton, IconButton (with its agentic variant) first; it builds on the published PDS Menu Button (the local base copy is in proposals/_base/MenuButton/, see its README: it imports its CSS and NavAccordion). Swap the local stand-ins for the real @libs/... imports.

Preview

npm run storybook, then Component Proposals/Buttons/Agentic Menu Button. Figma: none yet.