Skip to main contentCarbon Design System

Tree view

Color

ElementPropertyColor token
Labeltext color$text-secondary
Caret iconsvg$icon-secondary
Node iconsvg$icon-secondary
Nodebackground-color$layer*

* Denotes a contextual color token that will change values based on the layer it is placed on.

Closed and open states for tree-view

Example of closed (top) and open (bottom) tree view states.

Interactive states

StateElementPropertyColor token
HoverLabeltext-color$text-primary
Caret iconsvg$icon-primary
Node icon (optional)svg$icon-primary
Nodebackground-color$layer-hover*
FocusNodeborder$focus
SelectedLabeltext-color$text-primary
Caret iconsvg$icon-primary
Node icon (optional)svg$icon-primary
Nodebackground-color$layer-selected*
border-left$border-interactive
Selected + hoverLabeltext-color$text-primary
Caret iconsvg$icon-primary
Node icon (optional)svg$icon-primary
Nodebackground-color$layer-selected-hover*
DisabledLabeltext-color$text-disabled
Caret iconsvg$icon-disabled
Node icon (optional)svg$icon-disabled
Nodebackground-color$layer*

* Denotes a contextual color token that will change values based on the layer it is placed on.

Examples of the interactive states for tree-view

Typography

ElementFont-size (px/rem)Font-weightType token
Label14 / 0.875Regular / 400$body-compact-01

Structure

The internal structure of each node varies depending on the node type and level. The labels of nodes on the same level should always vertically align. Do not mix text-only and icon nodes together as this will misalign labels.

ElementPropertypx / remSpacing token
Nodepadding-right16 / 1$spacing-05
Caret iconmargin-right8 / .5$spacing-03

Tree view (text only)

Node typeLevelPropertypx / remSpacing token
BranchFirstpadding-left16 / 1$spacing-05
Secondpadding-left32 / 2$spacing-07
Thirdpadding-left48 / 3$spacing-09
Fourthpadding-left64 / 4$spacing-10
LeafFirstpadding-left40 / 2.5$spacing-08
Secondpadding-left56 / 3.5
Thirdpadding-left72 / 4.5
Fourthpadding-left88 / 5.5
Examples of text-only tree view node structures

Structure and spacing measurements for text only tree view | px / rem

Tree view (with icons)

Node typeLevelPropertypx / remSpacing token
BranchFirstpadding-left16 / 1$spacing-05
Secondpadding-left32 / 2$spacing-07
Thirdpadding-left48 / 3$spacing-09
Fourthpadding-left64 / 4$spacing-10
LeafFirstpadding-left32 / 2$spacing-07
Secondpadding-left48 / 3$spacing-09
Thirdpadding-left64 / 4$spacing-10
Fourthpadding-left80 / 5$spacing-11
Examples of tree view with icons node structures

Structure and spacing measurements for tree view with icons | px / rem