Replace raw <button> elements with TlaButton in the dotcom client
#9,190 opened on 2026年6月15日
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— variantsprimary,secondary,warning,ctapackages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx— for tldraw-UI contexts
Violation sites
components/BoardHistoryLog/BoardHistoryLog.tsx:72components/StoreErrorScreen.tsx:27components/ErrorPage/ErrorPage.tsx:84tla/providers/TlaRootProviders.tsx:289tla/components/TlaSidebar/TlaSidebar.tsx:53tla/components/TlaSidebar/components/TlaSidebarFeedbackButton.tsx:16tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx:73, 135, 263tla/components/dialogs/WorkspaceSettingsDialog.tsx:382, 387tla/components/dialogs/TlaInviteDialog.tsx:48, 62tla/components/dialogs/TlaCookieConsent.tsx:112, 119, 125tla/components/TlaEditor/TlaEditorTopLeftPanel.tsx:128, 359tla/components/dialogs/TlaSignInDialog.tsx:470tla/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:128is 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/TldrawUiButtonwith appropriate variants. - No visual or behavior regressions in the affected dialogs, sidebar, and error screens.