<tyro-ui-user-chip>

User Chip

A user displayed as a pill - avatar + name. Clicking it opens a Details bubble (large avatar, name, @username, info lines, tags). Presentational only: the app loads the details on (opened) if needed.

Details bubble

Click a user

Loaded on open

(opened) → simulated API call → [badges]

Sizes & display only

xs / sm / md / lg - [clickable]=false

Sans bulle

Inputs

Property	Type	Default	Description
`[name]`	`string`	`''`	Displayed name (e.g. displayName, otherwise username) - also used to generate the avatar without [src]
`[username]`	`string`	`-`	Username, shown as `@username` in the bubble
`[src]`	`string (URL)`	`-`	Profile picture (see `tyro-ui-avatar`)
`[size]`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Size of the pill avatar
`[clickable]`	`boolean`	`true`	`false`: display only, no bubble
`[badges]`	`ITyroUiUserChipBadge[]`	`[]`	Bubble tags: `{ label, variant?, icon? }` (`tyro-ui-chip` variants)
`[lines]`	`ITyroUiUserChipLine[]`	`[]`	Bubble info lines: `{ text, icon? }` (e.g. an e-mail)
`[detailLoading]`	`boolean`	`false`	Skeleton instead of lines and tags while loading
`[detailError]`	`string \| null`	`null`	Message shown when the details could not be loaded
`[bubbleLabel]`	`string`	`'Détail'`	Bubble title (automatic FR/EN by default)

Outputs

Property	Type	Default	Description
`(opened)`	`void`	-	Bubble opened - the right time to load the details (API)
`(closed)`	`void`	-	Bubble closed (outside click, Escape or scroll)

Usage

The bubble is fixed-positioned: it is never clipped by a scrolling table, and closes on outside click, Escape or scroll.

<tyro-ui-user-chip
  [name]="user.displayName || user.username"
  [username]="user.username"
  [src]="user.pp"
  [badges]="badges()"
  [detailLoading]="loading()"
  (opened)="loadUserCard(user.id)">
</tyro-ui-user-chip>