Docs
Chat
TreeNode

TreeNode

Collapsible tree node with expand/collapse arrow, icon, label, optional badges, and nested children.

Import

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

Props

Prop	Type	Default	Description
`label`*	`string`	-	Node label text
`icon`	`IconName`	-	Phosphor icon name
`iconEmoji`	`string`	-	Emoji icon (alternative to icon)
`iconColor`	`string`	-	CSS color for the icon
`depth`	`number`	`0`	Nesting depth (controls left padding)
`expanded`	`boolean`	`true`	Whether the node is expanded
`active`	`boolean`	-	Active/selected state
`unread`	`boolean`	-	Has unread messages
`bold`	`boolean`	-	Bold label (for root nodes)
`dim`	`boolean`	-	Dimmed label
`labelColor`	`string`	-	CSS color override for label
`labelWeight`	`string`	-	CSS font-weight override for label
`badges`	`ComponentChildren`	-	Badge elements to show after the label
`href`	`string`	-	Link for the label
`children`	`ComponentChildren`	-	Nested child rows

Examples

Org with Nested Repos

An org node containing channel and repo sub-trees.

🏢necessary

📦example-app/4

!channel

🔃pr/

!1313open

!130open

<TreeNode label="necessary" iconEmoji="🏢" bold>
  <TreeNode label="example-app/" iconEmoji="📦" depth={1}
    badges={<TreeBadge variant="count">4</TreeBadge>}>
    <ChannelRow type="auto" label="channel" italic depth={2} />
    <TreeNode label="pr/" depth={2} iconEmoji="🔃" iconColor="#7a3e9d"
      labelColor="#7a3e9d" labelWeight="600">
      <ChannelRow type="auto" label="131" depth={3} unread
        badges={<><TreeBadge variant="unread">3</TreeBadge>
        <TreeBadge variant="state" state="open">open</TreeBadge></>} />
    </TreeNode>
  </TreeNode>
</TreeNode>

Collapsed Node

Nodes can start collapsed.

📦lang-core/

<TreeNode label="lang-core/" iconEmoji="📦" depth={1} expanded={false} dim />