Content & Data
Tree Item
Tree Item is a single row in a hierarchical Tree View — file explorers, nested category browsers, org charts.
State (Default/Hover/Selected) — 3 variants
Figma documentedReact not implementedDocumentation only
This page documents the Figma component and usage rules. It is not a production-ready React implementation and does not include a live preview.
- Figma availability
- available
- React availability
- unavailable
- Documentation completeness
- partial
- Maturity
- documented
Known limitation: Implemented in React as an internal row composed by Tree View (components/ui/internal/TreeItem.tsx) — see /components/tree-view for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Content/Tree Item component set.
Purpose
Tree Item is a single row in a hierarchical Tree View — file explorers, nested category browsers, org charts.
When to use
Content with genuine hierarchical depth where indentation communicates structure.
When not to use
Flat, non-nested lists — use List Item.
Accessibility
role="treeitem" within a parent role="tree", with aria-expanded, aria-level, aria-setsize, aria-posinset. Full keyboard navigation required.
Common mistakes
Building indentation as a fixed per-component property instead of a real per-instance spacer value.
Properties
State as variants. Label (text). Show chevron (boolean).
Tokens used
semantic/surface/elevatedsemantic/action/primarysemantic/icon/mutedcomponent/radius/control
Known limitation
Implemented in React as an internal row composed by Tree View (components/ui/internal/TreeItem.tsx) — see /components/tree-view for the canonical, publicly documented, implemented pattern. This entry remains Figma-facing prose about the underlying Content/Tree Item component set.