PDS proposals
← All proposals

Agentic Button

A separate component, `AgenticButton`, for an action the agent does:

Net-new componentOpen in Storybook

proposals/AgenticButton/decisions.md34 lines · View on GitHub

Decisions: AgenticButton

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

  • Decision: the agentic button is its own component, AgenticButton, not an isAgentic prop on Button. It takes every Button prop except variant, and is always the secondary look with the gradient border. Built from a copy of the Button component: it reuses the Button's markup and classes (pds-button, pds-button--secondary, the size classes) and its CSS file, and adds the class pds-agentic-button with the gradient. isAgentic, isAnimated and hasAgenticOffset were removed from Button, and their CSS moved here.
  • Why: the designer decided to make it separate, and to use the secondary treatment, not the primary setting. (An earlier version of this proposal in the Button folder had variant='agentic', then isAgentic; this replaces both.)
  • Port impact: one new component (AgenticButton) instead of an option on Button. Button goes back to the published PDS Button with no change. AgenticButton imports the Button's CSS from the local base (_base/Button, not a proposal since 2026-10-21; its one change is the pds-button__leading wrapper).

The gradient border (kept from the Button proposal)

  • Technique: a transparent border with the gradient (--pds-gradient-ai-active) painted on the border-box, the secondary fill on the padding-box above it, and an opaque surface layer so the translucent secondary background does not show the gradient through the middle. Text and icon stay in the secondary foreground color. Static unless isAnimated.
  • Working spinner: isWorking always shows the agentic (gradient) Spinner. isLoading clears the gradient so the pulse shows cleanly (the Button's loading rules).

Shimmer (moved from Button)

  • isAnimated: the same loop as the animated agentic Panel (the gradient layer is twice the width, repeats, and slides by one tile; off for reduced motion). Opt-in, off by default. The stories turn it on.

Dependents

  • Menu Button: with isAgentic its trigger is an AgenticButton. Menu Button's own variant is ignored then (the look is always secondary). The icon-only trigger still uses Icon Button's own isAgentic.
  • Section Message: it used the AgenticButton for the agentic type's call to action, then (2026-10-21) moved to the standard secondary Button, so it no longer depends on it.
  • Panel (Approval Report): the Approve button is an AgenticButton.
  • Split Button: unchanged. Its gradient is around the whole control and does not use AgenticButton.

Open questions

  • Should the agentic button have a filled (primary) look later, for the one main action on a screen?

The offset ring is removed (2026-10-21)

  • Decision: hasOffset, the gradient ring floating outside the button, was removed (the prop, .pds-agentic-button--offset, its two custom variables, its shimmer, the With Offset story and the offset row of All States). The tight border is the one look.
  • Why: the designer's call.
  • Port impact: nothing for the offset; the gradient border is the only treatment.