PDS proposals
← All proposals

Badge

A copy of the PDS v2 Badge (pds-badge, same class names, props and CSS) with one addition: color='agentic-filled', the AI gradient as the fill, for denoting an agentic category.

Extends a PDS componentOpen in Storybook

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

Custom and net-new: Badge

Everything in this proposal that is not plain PDS v2.

Net-new components

None. This is a copy of the v2 .pds-badge.

Additions to existing PDS components

  • On .pds-badge: .pds-badge--agentic-filled (color='agentic-filled'). Fills the badge with the AI gradient.

Net-new props

  • color='agentic-filled': a new value on the existing color prop.

Custom CSS variables

  • --badge-bg, --badge-fg, --badge-font-size, --badge-height, --badge-icon-gap, --badge-padding-inline — set on .pds-badge and its size and color modifiers; same as v2.

Raw values kept on purpose

  • #fff — foreground of .pds-badge--ai-active; no white-on-gradient token, and foreground-reverse flips in dark mode. v2 has the same value; the port keeps it.
  • 1.875rem — height of .pds-badge--m; no spacing token matches. Same as v2; the port keeps it.