Docs
Chat
MemberRow

MemberRow

Single member entry with a small avatar, status dot overlay, name, and optional role tag.

Import

import { MemberRow } from "@gumtree/ui/chat/MemberRow";

Props

Prop	Type	Default	Description
`name`*	`string`	-	Display name
`status`	`"online" \| "away" \| "offline"`	`"offline"`	Presence status (dot color)
`avatarPlaceholder`	`string`	-	Avatar letter (defaults to first char of name)
`avatarColor`	`string`	-	Avatar background color
`avatarSrc`	`string`	-	Avatar image URL
`nameColor`	`string`	-	CSS color override for the name
`nameBold`	`boolean`	-	Bold name
`role`	`string`	-	Role label (e.g. 'admin', 'bot', 'away')
`roleColor`	`string`	-	CSS color for the role label
`opacity`	`number`	-	Row opacity (e.g. 0.5 for offline users)
`href`	`string`	-	Link URL

Examples

Status Variants

brendanadmin

aliceadmin

bob

carolaway

gumtreebot

dave

<MemberRow name="brendan" status="online" avatarColor="#89b4fa"
  nameColor="#1a5a9a" nameBold role="admin" />
<MemberRow name="alice" status="online" avatarColor="#cba6f7" role="admin" />
<MemberRow name="bob" status="online" avatarColor="#a6e3a1" />
<MemberRow name="carol" status="away" avatarColor="#f9e2af"
  role="away" roleColor="#b85c00" />
<MemberRow name="gumtree" status="online" avatarColor="#eee" role="bot" />
<MemberRow name="dave" status="offline" avatarColor="#ddd" opacity={0.5} />