tldraw/tldraw

Replace raw <button> elements with TlaButton in the dotcom client

Open

#9,190 opened on 2026年6月15日

GitHub で見る
 (2 comments) (1 reaction) (0 assignees)TypeScript (3,212 forks)batch import
dotcomgood first issueimprovement

Repository metrics

Stars
 (47,037 stars)
PR merge metrics
 (平均マージ 5d 4h) (30d で 227 merged PRs)

説明

Part of #9189.

The dotcom client renders raw <button> elements in ~20 user-facing spots that should use TlaButton (or TldrawUiButton where a tldraw-UI button fits). Raw buttons miss the focus ring, disabled handling, variant styling, and consistent sizing that the shared component provides, and they force per-site CSS to re-create that behavior.

For contrast, the app already uses <TlaButton> in ~20 places — so about half of all buttons bypass the component.

Canonical component

  • apps/dotcom/client/src/tla/components/TlaButton/TlaButton.tsx — variants primary, secondary, warning, cta
  • packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx — for tldraw-UI contexts

Violation sites

  • components/BoardHistoryLog/BoardHistoryLog.tsx:72
  • components/StoreErrorScreen.tsx:27
  • components/ErrorPage/ErrorPage.tsx:84
  • tla/providers/TlaRootProviders.tsx:289
  • tla/components/TlaSidebar/TlaSidebar.tsx:53
  • tla/components/TlaSidebar/components/TlaSidebarFeedbackButton.tsx:16
  • tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx:73, 135, 263
  • tla/components/dialogs/WorkspaceSettingsDialog.tsx:382, 387
  • tla/components/dialogs/TlaInviteDialog.tsx:48, 62
  • tla/components/dialogs/TlaCookieConsent.tsx:112, 119, 125
  • tla/components/TlaEditor/TlaEditorTopLeftPanel.tsx:128, 359
  • tla/components/dialogs/TlaSignInDialog.tsx:470
  • tla/pages/local-file-index.tsx:46

Out of scope

The raw <button> inside the primitives themselves is correct and should be left alone: TlaButton.tsx, TlaCtaButton.tsx (see #9189), and tla-menu.tsx. That is where the abstraction bottoms out.

Notes

  • Some sites also carry ad-hoc button CSS classes (.acceptButton, .declineButton, .cookieButton, .inlineButton) — coordinate with the CSS consolidation sweep so the markup and styles move together.
  • TlaEditorTopLeftPanel.tsx:128 is a width-setter element used for measurement, not a real action button; confirm whether it should stay a bare element before converting.

Acceptance

  • Listed sites use TlaButton/TldrawUiButton with appropriate variants.
  • No visual or behavior regressions in the affected dialogs, sidebar, and error screens.

コントリビューターガイド