Tree, editor & color picker
Tree item
Section titled “Tree item”Row in a tree; levels 0–2.
Variants: 18
| Property | Type / options |
|---|---|
| Label | text |
| Icon swap | instance swap (icon) |
| Type | Folder · File |
| Level | 0 · 1 · 2 |
| State | Default · Hover · Selected |
Tree view
Section titled “Tree view”Example tree built from Tree items.
Variants: 1
Do
- Use for files and categories.
- Show expand/collapse chevrons.
- Highlight the selected item.
Don’t
- Don’t nest deeper than four levels.
- Don’t use for flat lists.
- Don’t load huge trees at once.
Editor toolbar button
Section titled “Editor toolbar button”Formatting button for the text editor.
Variants: 3
| Property | Type / options |
|---|---|
| Icon swap | instance swap (icon) |
| State | Default · Hover · Active |
Text editor
Section titled “Text editor”Rich text editor shell.
Variants: 1
| Property | Type / options |
|---|---|
| Value | text |
Color swatch
Section titled “Color swatch”Preset colour dot.
Variants: 2
| Property | Type / options |
|---|---|
| State | Default · Selected |
Color picker
Section titled “Color picker”Saturation area, hue slider, eyedropper, hex field and presets.
Variants: 1