← All proposals

Icon Button

Starting point for an IconButton proposal.

Extends a PDS componentOpen in Storybook

proposals/IconButton/decisions.md12 lines · View on GitHub

Decisions

  • Base is the unmodified v2 IconButton (IconButton.tsx, icon-button.css, stories). Proposal changes go on top.
  • Icon, Tooltip and types come from the published package; mergeClasses is a local stand-in (the port uses the real one).
  • Strict-null fixes only, behavior unchanged: icon2Name defaults to undefined instead of null, refs typed HTMLDivElement, title uses undefined instead of null. v2 isn't strict, this repo is.
  • Storybook: both Button proposals sit under Proposals/Buttons/ (Button, Icon Button).
  • isAgentic boolean modifier, same model as Button (not a variant or a separate component). AI gradient (--pds-gradient-ai-active) as the border, same token as Button, the agentic Spinner and pds-ai-active-border.
  • Only the standard variant supports it (the secondary-style one); reverse and critical warn in dev. Open: should critical or reverse get a border too?
  • isAgentic recolors the border; it needs hasBorder. Agentic + border = AI gradient border; border alone = plain border; neither = borderless icon. Without hasBorder, isAgentic changes nothing (an earlier version drew the border on its own, which read as a second kind of border).
  • Implementation: transparent border + gradient on the border-box, fill layers on the padding-box, opaque surface layer under translucent fills. The fill is a custom property (--icon-button-fill) so hover, active and pressed swap it. Pressed uses the secondary active background instead of v2's border-color fill, which the gradient can't provide.
  • Storybook defaults hasBorder and isAgentic to true (handoff). Sizes shows a borderless row and a bordered row; the bordered row follows the isAgentic control (on = AI gradient border, off = default gray).