PDS proposals
← All proposals

Agentic Split Button

A separate component, `AgenticSplitButton`, a copy of the PDS v2 Split Button, so the engineer's port is mostly a copy:

Net-new componentOpen in Storybook

proposals/AgenticSplitButton/decisions.md21 lines · View on GitHub

Decisions: AgenticSplitButton

  • Base is the unmodified PDS v2 Split Button (now AgenticSplitButton.tsx, agentic-split-button.css). It uses the local Button and MenuButton proposals in place of the package ones, and the package's ButtonLink (there is no local copy). Sample data and stories are new. The PDS stories for the link-button case were not copied.
  • The gradient is around the whole control, not on each half (2026-10-21). A split button reads as one control, so one border, like the standalone agentic Button. The halves lose their own borders and the wrapper paints the gradient on its border-box with the same layered-background technique as the Button (a transparent border, the fill on the padding-box above the gradient, an opaque surface layer so a translucent secondary fill does not show the gradient). The halves are a plain secondary Button and a plain Menu Button, so they are not Agentic Buttons on their own.
  • Same height as a standalone Button. The wrapper's border adds two border widths, so in the agentic state the two halves are 2 border widths shorter (--button-height overridden for sizes s and m), and the whole control matches an agentic Button of the same size. The PDS secondary split button is, as shipped, 2 border widths taller than a Button, since its wrapper has a border and the halves keep their full height; not changed for the non-agentic variants.
  • The separator keeps the variant's color: the surface color on primary and the secondary border color on secondary, not a gradient. Open: should the divider also be a gradient?
  • isAnimated is opt-in, like on the Agentic Button. The shimmer is the same loop as the Button and Panel (off for reduced motion). The stories turn it on by default.
  • Secondary only, like the Agentic Button: no variant prop and no primary version.
  • Not covered: a working state on the primary action (isWorking), a link as the primary action in the stories.

Open questions

  • Gradient on the divider between the halves, or the plain separator?
  • Should the primary action have a working state (the Button's isWorking with the gradient spinner)?

A separate component, not a Split Button option (2026-10-21)

  • Decision: the proposal was the PDS Split Button plus an isAgentic prop. It is now its own component, AgenticSplitButton, which is always agentic: isAgentic and variant were removed, the classes are pds-agentic-split-button and pds-agentic-split-button--animated on top of the PDS ones, and the story title is Buttons/Agentic Split Button. The Not Agentic comparison story and the primary variants were removed.
  • Why: the designer decided the agentic menu and split buttons are new components, not extensions of the existing ones; and the agentic look is the secondary treatment, as for the Agentic Button.
  • Port impact: one new component, AgenticSplitButton. The existing Split Button needs no change.