PDS proposals
← All proposals

Agent avatar

Start from the PDS v2 Avatar (src/components/identity/Avatar, branch v2.x), renamed AgentAvatar (class pds-agent-avatar).

Net-new componentOpen in Storybook

proposals/AgentAvatar/custom.md29 lines · View on GitHub

Custom and net-new: AgentAvatar

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-agent-avatar — Start from the PDS v2 Avatar (src/components/identity/Avatar, branch v2.x), renamed AgentAvatar (class pds-agent-avatar).
    • Parts and modifiers: .pds-agent-avatar--halo, .pds-agent-avatar--l, .pds-agent-avatar--m, .pds-agent-avatar--square, .pds-agent-avatar--xl, .pds-agent-avatar--xs, .pds-agent-avatar__content, .pds-agent-avatar__content--link, .pds-agent-avatar__icon

Additions to existing PDS components

None.

Net-new props

All props of AgentAvatarProps are new (net-new component).

Custom CSS variables

  • --avatar-halo-gap — set on .pds-agent-avatar
  • --avatar-halo-ring — set on .pds-agent-avatar
  • --avatar-icon-size — set on .pds-agent-avatar
  • --avatar-radius — set on .pds-agent-avatar
  • --avatar-size — set on .pds-agent-avatar

Raw values kept on purpose

None.