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/HANDOFF.md69 lines · View on GitHub

Handoff: Agentic Split Button

What and why

A split button for actions the agent does: a primary action grouped with a menu of more actions, with the AI gradient as the border around the whole control (the primary action and the caret together). A separate component (decided 2026-10-21): a copy of the PDS v2 Split Button, always agentic, with the secondary look only (no variant, no primary version), like the Agentic Button. The existing Split Button needs no change.

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

Exploration and decisions

  • One border around the control, not on each half. The wrapper paints the gradient on its border-box (the Button's technique); the halves are a plain secondary Button and a plain Menu Button with their own borders removed.
  • Same height as an Agentic Button. The wrapper's border adds two border widths, so in this state the halves are that much shorter (--button-height overridden for s and m): the control is 32px and 40px high.
  • The separator between the halves keeps the secondary border color, not a gradient.
  • isAnimated shimmers the border (opt-in; off for reduced motion).
  • Secondary only. Primary was built first and dropped to match the Agentic Button.

Full list: decisions.md.

API

The Split Button props (actionItems, size, iconName, placement, anchorToFullButton, moreActionsLabel, disabled, id, className) except variant, plus:

Prop Type Default Purpose
isAnimated boolean false Shimmers the gradient border. Off for reduced motion.

Variants and states: sizes s and m; with icon; disabled. Stories: Default, With Icon, Disabled, All Sizes.

Tokens used

  • --pds-animation-duration-ai-shimmer
  • --pds-border-radius-button
  • --pds-border-width-default
  • --pds-color-button-secondary-background-default, --pds-color-button-secondary-border
  • --pds-color-surface-default
  • --pds-gradient-ai-active
  • --pds-spacing-button-height-m, --pds-spacing-button-height-s
  • --pds-spacing-m, --pds-spacing-s

Impact

From impact.md: no existing PDS component is reached. The opt-in rules are scoped to .pds-agentic-split-button. No other proposal builds on it.

Reused vs net-new

  • Reused: the Split Button markup and CSS (copied), the package's ButtonLink, the local base Button (_base/Button) and MenuButton.
  • Net-new: .pds-agentic-split-button and --animated, the isAnimated prop, and two custom variables. See custom.md (no raw values).

Accessibility

  • Unchanged from the Split Button: two buttons (the primary action and "More actions"), the Menu Button's menu semantics and keyboard behavior.
  • 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

  • Should the divider between the halves also be a gradient?
  • Should the primary action have a working state (the Button's isWorking)?
  • Is a primary version needed later?

Port notes

  • New component next to the Split Button (src/components/buttons/), via npm run generate:component. It uses the published PDS Button and Menu Button (the local base copies are in proposals/_base/). Swap the local mergeClasses for the real one.

Preview

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