PDS proposals
← All proposals

Agentic Button

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

Net-new componentOpen in Storybook

proposals/AgenticButton/custom.md25 lines · View on GitHub

Custom and net-new: AgenticButton

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-button — a button for an action the agent does: the secondary Button look with the AI gradient as its border. Built on the Button's own classes.
    • Parts and modifiers: .pds-agentic-button--animated (the shimmer)

Additions to existing PDS components

None. It adds a class beside pds-button and pds-button--secondary; it does not change them.

Net-new props

All props of AgenticButtonProps are new (net-new component): the Button props except variant, plus isAnimated.

Custom CSS variables

  • --button-border-color, --button-border-color-active, --button-border-color-hover — the Button's variables, set to transparent on .pds-agentic-button so the gradient shows as the border.

Raw values kept on purpose

None.