PDS proposals
← All proposals

Button

Starting point for a Button proposal.

Extends a PDS componentOpen in Storybook

proposals/Button/custom.md37 lines · View on GitHub

Custom and net-new: Button

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

None.

Additions to existing PDS components

  • On .pds-button: .pds-button--agentic, .pds-button__leading

Net-new props

  • isAgentic: AI gradient border and gradient working spinner.

Custom CSS variables

  • --button-background-color — set on .pds-button
  • --button-background-color-active — set on .pds-button
  • --button-background-color-hover — set on .pds-button
  • --button-border-color — set on .pds-button
  • --button-border-color-active — set on .pds-button
  • --button-border-color-hover — set on .pds-button
  • --button-box-shadow-active — set on .pds-button
  • --button-font-size — set on .pds-button
  • --button-foreground-color — set on .pds-button
  • --button-foreground-color-hover — set on .pds-button
  • --button-gap-inline — set on .pds-button
  • --button-height — set on .pds-button
  • --button-padding-inline — set on .pds-button
  • --dot-size — set on .pds-button--xs .pds-status-dot

Raw values kept on purpose

  • rgba(255, 255, 255, 0.75) — tally ring that lifts the badge off filled buttons. Copied unchanged from v2 button.css; PDS has no translucent-white token. Port as-is.