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/custom.md26 lines · View on GitHub

Custom and net-new: AgenticSplitButton

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

  • .pds-agentic-split-button — a split button for actions the agent does: the PDS Split Button with the AI gradient as the border around the whole control. Built on the PDS classes.
    • Parts and modifiers: .pds-agentic-split-button--animated (the shimmer)

Additions to existing PDS components

None. It adds classes beside pds-split-button; it does not change them.

Net-new props

All props of AgenticSplitButtonProps are new (net-new component): the Split Button props except variant, plus isAnimated (shimmers the border).

Custom CSS variables

  • --button-height — the Button's variable, set on .pds-button--s and .pds-button--m inside .pds-agentic-split-button; two border widths shorter so the control matches a standalone Button.
  • --split-button-fill — set on .pds-agentic-split-button; the fill layer painted over the gradient (the variant's background).

Raw values kept on purpose

None.