User

catnip-user displays a person as the compact avatar chip from the Catnip design language. Pass the person through name. Initials are derived from that name unless you set initials. Avatar color defaults to purple and can be overridden with color.

It is not a select field: there is no options list. interactive chooses whether the chip is a control:

• false (default) — avatar + name, or avatar only when hideName, with no action.
• true with interaction="click" (default when interactive) — pill button, no chevron.
• true with interaction="expand" — pill + chevron button. Put it in Dropdown’s trigger slot when the person must be selectable.

Override the circle with the avatar slot (photo, SVG, or other content). The default slot overrides the visible name; name still drives initials and Unassigned.

Live example

<catnip-dropdown hide-label aria-label="Choose a person" .modelValue="name || 'unassigned'" @update:modelValue="onSelect">
  <catnip-user slot="trigger" interactive interaction="expand" .name="name" .color="color" />
  <catnip-dropdown-option value="unassigned" label="Unassigned">
    <catnip-user />
  </catnip-dropdown-option>
  <catnip-dropdown-option value="Name Surname" label="Name Surname">
    <catnip-user name="Name Surname" />
  </catnip-dropdown-option>
</catnip-dropdown>

<catnip-user name="Name Surname" />
<catnip-user .hideName="true" name="Name Surname" />
<catnip-user interactive interaction="click" name="Name Surname" />
<catnip-user name="Some Person" color="#037257" />
<catnip-user interactive interaction="expand" name="Name Surname" initials="AB" disabled />

<catnip-user name="Name Surname">
  <img slot="avatar" src="/avatar.jpg" alt="" />
  Display name
</catnip-user>

Initials

• Two or more words: first letter of the first two words (Name Surname → NS).
• One word: first two letters (Madonna → MA).
• Set initials when the derived value is not what you want. Only the first two characters are shown.

An empty name shows the bundled user.unassigned copy with the built-in user icon. Set unassignedLabel to override that string on one instance. A slotted avatar replaces that icon. When using User as a Dropdown trigger, update name and color from the same selected person so the trigger avatar matches its option-row avatar.

Accessibility

• interactive users are native buttons. Hover, pressed, selected, and focus-visible states match Figma.
• selected is the open/pressed appearance when interactive. Dropdown also applies it via aria-expanded on the host. The chevron rotates 180° in that state when interaction is expand.
• Non-interactive users do not enter the tab order.
• The visible name (or Unassigned) is the accessible name. hideName moves that string onto aria-label. Static avatar-only uses role="img" so that label is exposed.
• Avatar initials, the unassigned icon, and slotted avatars are decorative (aria-hidden on the circle). Keep slotted images alt="".
• Do not encode status or permission using avatar color alone.