fix(web): enforce single primary button per visible context #74

New Issue

forbes · 2026-02-13T19:01:26Z

forbes commented

2026-02-13 19:01:26 +00:00

Ref: docs/STYLE.md § Components / Buttons

Primary is used once per visible context (the main action). All other actions use secondary or ghost.

Several forms show multiple mauve-styled buttons simultaneously:

web/src/components/items/CreateItemPane.tsx — Create + Cancel both styled prominently
web/src/pages/ProjectsPage.tsx — Create Project / Save Changes alongside Cancel
web/src/pages/SchemasPage.tsx — Save + Cancel in inline table edits

Fix: Keep only the primary action (Create/Save) as .btn-primary (mauve). Cancel buttons should use secondary style (background: var(--ctp-surface0), border: var(--ctp-surface1), color: var(--ctp-text)).

**Ref:** `docs/STYLE.md` § Components / Buttons > Primary is used once per visible context (the main action). All other actions use secondary or ghost. Several forms show multiple mauve-styled buttons simultaneously: - `web/src/components/items/CreateItemPane.tsx` — Create + Cancel both styled prominently - `web/src/pages/ProjectsPage.tsx` — Create Project / Save Changes alongside Cancel - `web/src/pages/SchemasPage.tsx` — Save + Cancel in inline table edits **Fix:** Keep only the primary action (Create/Save) as `.btn-primary` (mauve). Cancel buttons should use secondary style (`background: var(--ctp-surface0)`, `border: var(--ctp-surface1)`, `color: var(--ctp-text)`).

forbes referenced this issue

2026-02-13 19:26:43 +00:00

fix: style guide batch 2 — buttons, tables, transitions, inputs, validation #84

forbes closed this issue

2026-02-13 20:37:50 +00:00

forbes referenced a pull request that will close this issue

2026-02-13 20:38:11 +00:00

fix(web): style guide batch 3 — icons, font scale, spacing #85

Sign in to join this conversation.