Tree

How they help

Trees show relationships between items and enable users to manage and interact with nested data effectively. This structured approach reduces cognitive load and simplifies access to complex information.

 

 

Anatomy

1. Closed tree item: item that has children items, but are hidden
2. Closed item icon: chevron that shows there’s children items hidden
3. Tree item title
4. Badge❖: option visual
5. Focus ring: visual focus state
6. Open tree item: item that has children item(s) and are visible
7. Leaf tree item: item that has no children item(s)

 

 

Variants

There are a few variants of the component: checkbox, icon before or after and badge.

 

 

 

---

Designer resources