Mark picker
A workspace or avatar mark picker with a large live preview, a colour tray and a grid of initials and emblem glyphs, plus a random roll.
Preview
Pebble notes
Ember · Peak
Colour
Mark
Workspaces
Pebble notes
You · 5 members
Pebble Lab
12 members
Pebble Personal
3 members
Pebble Fund
8 members
Sizes
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Workspace or person name; drives the initials and the preview label. |
| value | { color: string; glyph: string } | — | Controlled mark. glyph is "initials" or a glyph id. |
| defaultValue | MarkValue | first colour, initials | Uncontrolled starting mark. |
| onValueChange | (value: MarkValue) => void | — | Called on colour, mark or random change. |
| colors | MarkColor[] | MARK_COLORS | Colour dots as { value, name }. |
| glyphs | MarkGlyph[] | MARK_GLYPHS | Glyph options as { id, name, d } on a 24×24 grid. |
| shape | "squircle" | "circle" | "squircle" | Preview mark shape. |
| columns | number | 6 | Columns in the mark grid (Up/Down step size). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.