PDS proposals
← All proposals

Section Message

A copy of the PDS v2 Section Message (pds-section-message, same class names, props and behavior) with an agentic type (AI gradient border on a surface fill, the Agent Avatar as its leading icon (decided 2026-10-21; iconName picks its icon), the standard secondary Button as the CTA, a silver-muted Badge) and an avatarProps option for the avatar (halo, shape, size).

Extends a PDS componentOpen in Storybook

proposals/SectionMessage/custom.md33 lines · View on GitHub

Custom and net-new: SectionMessage

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-section-message: .pds-section-message--agentic. The agentic type; see Net-new props.

Net-new props

  • type='agentic': a new value on the existing type prop. The AI gradient as the border on a surface fill, with the standard secondary Button as the CTA and a silver-muted Badge.
  • avatarProps: options for the Agent Avatar (the leading icon of the agentic type); on another type it shows the avatar there. Takes partial Agent Avatar props.
  • iconName: the icon of the Agent Avatar of the agentic type, zappy or sparklesSolid. Ignored for the other types.

Custom CSS variables

  • --button-background-color — set on .pds-button.pds-button--secondary inside the message; same as v2.
  • --button-border-color — set on .pds-button.pds-button--secondary
  • --button-foreground-color — set on .pds-button.pds-button--secondary
  • --button-foreground-color-hover — set on .pds-button.pds-button--secondary
  • --message-bg — set on .pds-section-message
  • --message-border — set on .pds-section-message
  • --message-fg — set on .pds-section-message

Raw values kept on purpose

  • 0.125rem — nudges the title row and icon down by 2px so they center on the first line of text; no spacing token matches. Same as v2; the port keeps it.
  • 0.0625rem — lifts the badge by 1px to align it with the title; no spacing token matches. Same as v2; the port keeps it.