TreeToggle
20px with 4px corners. Collapsed shows a filled plus, expanded an outlined minus.
Figma: 10 / Components / TreeToggleGrow pages
Usage
Source: src/components/ui/tree-toggle.tsx
import { TreeToggle } from '@/components/ui/tree-toggle'<TreeToggle expanded={open} onClick={() => setOpen(!open)} />When to use
When to reach for it, and when to use something else.
Use it for
Complete: Expanding nested rows, such as journeys inside a tool.
Avoid
Not complete: Opening sections of a page; use the accordion caret.
TreeToggle
| Prop | Type | Default | Description |
|---|---|---|---|
| expanded | boolean | false | Plus when collapsed, minus when expanded. |
| label | string | – | Accessible name; defaults to Expand or Collapse. |
