UI components round two (#2847)

This PR:
- replaces the `shareZone` prop with `SharePanel` component
- replaces the `topZone` prop with `TopPanel` components
- replaces the `Button` component with `TldrawUiButton` and
subcomponents
- adds `TldrawUi` prefix to our primitives
- fixes a couple of bugs with the components

### Change Type

- [x] `major` — Breaking change

apps/dotcom/src/components/LocalEditor.tsx

@@ -67,6 +67,13 @@ const components: TLComponents = {
 			</DefaultDebugMenu>
 		)
 	},
+	SharePanel: () => {
+		return (
+			<div className="tlui-share-zone" draggable={false}>
+				<ShareMenu />
+			</div>
+		)
+	},
 }
 
 export function LocalEditor() {
@@ -88,11 +95,6 @@ export function LocalEditor() {
 				overrides={[sharingUiOverrides, fileSystemUiOverrides]}
 				onUiEvent={handleUiEvent}
 				components={components}
-				shareZone={
-					<div className="tlui-share-zone" draggable={false}>
-						<ShareMenu />
-					</div>
-				}
 				inferDarkMode
 			>
 				<LocalMigration />

apps/dotcom/src/components/MultiplayerEditor.tsx

@@ -13,8 +13,10 @@ import {
 	Tldraw,
 	TldrawUiMenuGroup,
 	TldrawUiMenuItem,
+	atom,
 	lns,
 	useActions,
+	useValue,
 } from '@tldraw/tldraw'
 import { useCallback, useEffect } from 'react'
 import { useRemoteSyncClient } from '../hooks/useRemoteSyncClient'
@@ -39,6 +41,8 @@ import { SneakyOnDropOverride } from './SneakyOnDropOverride'
 import { StoreErrorScreen } from './StoreErrorScreen'
 import { ThemeUpdater } from './ThemeUpdater/ThemeUpdater'
 
+const shittyOfflineAtom = atom('shitty offline atom', false)
+
 const components: TLComponents = {
 	ErrorFallback: ({ error }) => {
 		throw error
@@ -78,6 +82,19 @@ const components: TLComponents = {
 			</DefaultKeyboardShortcutsDialog>
 		)
 	},
+	TopPanel: () => {
+		const isOffline = useValue('offline', () => shittyOfflineAtom.get(), [])
+		if (!isOffline) return null
+		return <OfflineIndicator />
+	},
+	SharePanel: () => {
+		return (
+			<div className="tlui-share-zone" draggable={false}>
+				<PeopleMenu />
+				<ShareMenu />
+			</div>
+		)
+	},
 }
 
 export function MultiplayerEditor({
@@ -96,6 +113,12 @@ export function MultiplayerEditor({
 		roomId,
 	})
 
+	const isOffline =
+		storeWithStatus.status === 'synced-remote' && storeWithStatus.connectionStatus === 'offline'
+	useEffect(() => {
+		shittyOfflineAtom.set(isOffline)
+	}, [isOffline])
+
 	const isEmbedded = useIsEmbedded(roomSlug)
 	const sharingUiOverrides = useSharing()
 	const fileSystemUiOverrides = useFileSystem({ isMultiplayer: true })
@@ -118,9 +141,6 @@ export function MultiplayerEditor({
 		return <EmbeddedInIFrameWarning />
 	}
 
-	const isOffline =
-		storeWithStatus.status === 'synced-remote' && storeWithStatus.connectionStatus === 'offline'
-
 	return (
 		<div className="tldraw__editor">
 			<Tldraw
@@ -131,13 +151,6 @@ export function MultiplayerEditor({
 				initialState={isReadOnly ? 'hand' : 'select'}
 				onUiEvent={handleUiEvent}
 				components={components}
-				topZone={isOffline && <OfflineIndicator />}
-				shareZone={
-					<div className="tlui-share-zone" draggable={false}>
-						<PeopleMenu />
-						<ShareMenu />
-					</div>
-				}
 				autoFocus
 				inferDarkMode
 			>

apps/dotcom/src/components/PeopleMenu/PeopleMenu.tsx

@@ -1,6 +1,8 @@
 import * as Popover from '@radix-ui/react-popover'
 import {
-	Button,
+	TldrawUiButton,
+	TldrawUiButtonIcon,
+	TldrawUiButtonLabel,
 	track,
 	useContainer,
 	useEditor,
@@ -73,13 +75,16 @@ export const PeopleMenu = track(function PeopleMenu({
 						)}
 						{!hideShareMenu && (
 							<div className="tlui-people-menu__section">
-								<Button
+								<TldrawUiButton
 									type="menu"
-									data-wd="people-menu.invite"
-									label={'people-menu.invite'}
-									icon="plus"
+									data-testid="people-menu.invite"
 									onClick={() => editor.addOpenMenu('share menu')}
-								/>
+								>
+									<TldrawUiButtonLabel>
+										{msg('people-menu.invite')}
+										<TldrawUiButtonIcon icon="plus" />
+									</TldrawUiButtonLabel>
+								</TldrawUiButton>
 							</div>
 						)}
 					</div>

apps/dotcom/src/components/PeopleMenu/PeopleMenuItem.tsx

@@ -1,6 +1,7 @@
 import {
-	Button,
-	Icon,
+	TldrawUiButton,
+	TldrawUiButtonIcon,
+	TldrawUiIcon,
 	track,
 	useEditor,
 	usePresence,
@@ -34,16 +35,16 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 
 	return (
 		<div className="tlui-people-menu__item tlui-buttons__horizontal">
-			<Button
+			<TldrawUiButton
 				type="menu"
 				className="tlui-people-menu__item__button"
 				onClick={() => editor.animateToUser(userId)}
 				onDoubleClick={handleFollowClick}
 			>
-				<Icon icon="color" color={presence.color} />
+				<TldrawUiIcon icon="color" color={presence.color} />
 				<div className="tlui-people-menu__name">{presence.userName ?? 'New User'}</div>
-			</Button>
-			<Button
+			</TldrawUiButton>
+			<TldrawUiButton
 				type="icon"
 				className="tlui-people-menu__item__follow"
 				title={
@@ -53,11 +54,14 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 							? msg('people-menu.following')
 							: msg('people-menu.follow')
 				}
-				icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				onClick={handleFollowClick}
 				disabled={theyAreFollowingYou}
 				data-active={youAreFollowingThem || theyAreFollowingYou}
-			/>
+			>
+				<TldrawUiButtonIcon
+					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
+				/>
+			</TldrawUiButton>
 		</div>
 	)
 })

apps/dotcom/src/components/PeopleMenu/UserPresenceColorPicker.tsx

@@ -1,6 +1,7 @@
 import * as Popover from '@radix-ui/react-popover'
 import {
-	Button,
+	TldrawUiButton,
+	TldrawUiButtonIcon,
 	USER_COLORS,
 	track,
 	useContainer,
@@ -88,13 +89,14 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 	return (
 		<Popover.Root onOpenChange={handleOpenChange} open={isOpen}>
 			<Popover.Trigger dir="ltr" asChild>
-				<Button
+				<TldrawUiButton
 					type="icon"
 					className="tlui-people-menu__user__color"
-					icon="color"
 					style={{ color: editor.user.getColor() }}
 					title={msg('people-menu.change-color')}
-				/>
+				>
+					<TldrawUiButtonIcon icon="color" />
+				</TldrawUiButton>
 			</Popover.Trigger>
 			<Popover.Portal container={container}>
 				<Popover.Content
@@ -106,11 +108,11 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 				>
 					<div className={'tlui-buttons__grid'}>
 						{USER_COLORS.map((item: string) => (
-							<Button
+							<TldrawUiButton
 								type="icon"
 								key={item}
 								data-id={item}
-								data-wd={item}
+								data-testid={item}
 								aria-label={item}
 								data-state={value === item ? 'hinted' : undefined}
 								title={item}
@@ -120,8 +122,9 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								onPointerDown={handleButtonPointerDown}
 								onPointerUp={handleButtonPointerUp}
 								onClick={handleButtonClick}
-								icon={'color'}
-							/>
+							>
+								<TldrawUiButtonIcon icon="color" />
+							</TldrawUiButton>
 						))}
 					</div>
 				</Popover.Content>

apps/dotcom/src/components/PeopleMenu/UserPresenceEditor.tsx

@@ -1,4 +1,12 @@
-import { Button, Input, useEditor, useTranslation, useUiEvents, useValue } from '@tldraw/tldraw'
+import {
+	TldrawUiButton,
+	TldrawUiButtonIcon,
+	TldrawUiInput,
+	useEditor,
+	useTranslation,
+	useUiEvents,
+	useValue,
+} from '@tldraw/tldraw'
 import { useCallback, useRef, useState } from 'react'
 import { UI_OVERRIDE_TODO_EVENT } from '../../utils/useHandleUiEvent'
 import { UserPresenceColorPicker } from './UserPresenceColorPicker'
@@ -36,7 +44,7 @@ export function UserPresenceEditor() {
 		<div className="tlui-people-menu__user">
 			<UserPresenceColorPicker />
 			{isEditingName ? (
-				<Input
+				<TldrawUiInput
 					className="tlui-people-menu__user__input"
 					defaultValue={userName}
 					onValueChange={handleValueChange}
@@ -62,14 +70,15 @@ export function UserPresenceEditor() {
 					) : null}
 				</>
 			)}
-			<Button
+			<TldrawUiButton
 				type="icon"
 				className="tlui-people-menu__user__edit"
-				data-wd="people-menu.change-name"
+				data-testid="people-menu.change-name"
 				title={msg('people-menu.change-name')}
-				icon={isEditingName ? 'check' : 'edit'}
 				onClick={toggleEditingName}
-			/>
+			>
+				<TldrawUiButtonIcon icon={isEditingName ? 'check' : 'edit'} />
+			</TldrawUiButton>
 		</div>
 	)
 }

apps/dotcom/src/components/SnapshotsEditor.tsx

@@ -54,6 +54,13 @@ const components: TLComponents = {
 			</DefaultKeyboardShortcutsDialog>
 		)
 	},
+	SharePanel: () => {
+		return (
+			<div className="tlui-share-zone" draggable={false}>
+				<ExportMenu />
+			</div>
+		)
+	},
 }
 
 type SnapshotEditorProps = {
@@ -79,11 +86,6 @@ export function SnapshotsEditor(props: SnapshotEditorProps) {
 					editor.updateInstanceState({ isReadonly: true })
 				}}
 				components={components}
-				shareZone={
-					<div className="tlui-share-zone" draggable={false}>
-						<ExportMenu />
-					</div>
-				}
 				renderDebugMenuItems={() => <DebugMenuItems />}
 				autoFocus
 				inferDarkMode

apps/dotcom/src/utils/migration/MigrationAnnouncement.tsx

@@ -1,4 +1,10 @@
-import { Button, LegacyTldrawDocument, useEditor, useValue } from '@tldraw/tldraw'
+import {
+	LegacyTldrawDocument,
+	TldrawUiButton,
+	TldrawUiButtonLabel,
+	useEditor,
+	useValue,
+} from '@tldraw/tldraw'
 
 export function MigrationAnnouncement({
 	onClose,
@@ -107,16 +113,16 @@ export function MigrationAnnouncement({
 						marginTop: 8,
 					}}
 				>
-					<Button
+					<TldrawUiButton
 						type="normal"
 						style={{ fontSize: 14, marginRight: 'auto' }}
 						onClick={downloadFile}
 					>
-						Download original
-					</Button>
-					<Button style={{ fontSize: 14 }} type="primary" onClick={onClose}>
-						Continue
-					</Button>
+						<TldrawUiButtonLabel>Download original</TldrawUiButtonLabel>
+					</TldrawUiButton>
+					<TldrawUiButton style={{ fontSize: 14 }} type="primary" onClick={onClose}>
+						<TldrawUiButtonLabel>Continue</TldrawUiButtonLabel>
+					</TldrawUiButton>
 				</div>
 			</div>
 		</div>

apps/dotcom/src/utils/shouldClearDocument.tsx

@@ -1,11 +1,13 @@
 import {
-	Button,
-	DialogBody,
-	DialogCloseButton,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
 	TLUiDialogsContextType,
+	TldrawUiButton,
+	TldrawUiButtonCheck,
+	TldrawUiButtonLabel,
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+	TldrawUiDialogTitle,
 	useTranslation,
 } from '@tldraw/tldraw'
 import { useState } from 'react'
@@ -49,26 +51,28 @@ function ConfirmClearDialog({
 	const [dontShowAgain, setDontShowAgain] = useState(false)
 	return (
 		<>
-			<DialogHeader>
-				<DialogTitle>{msg('file-system.confirm-clear.title')}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody style={{ maxWidth: 350 }}>
+			<TldrawUiDialogHeader>
+				<TldrawUiDialogTitle>{msg('file-system.confirm-clear.title')}</TldrawUiDialogTitle>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody style={{ maxWidth: 350 }}>
 				{msg('file-system.confirm-clear.description')}
-			</DialogBody>
-			<DialogFooter className="tlui-dialog__footer__actions">
-				<Button
+			</TldrawUiDialogBody>
+			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+				<TldrawUiButton
 					type="normal"
 					onClick={() => setDontShowAgain(!dontShowAgain)}
-					iconLeft={dontShowAgain ? 'checkbox-checked' : 'checkbox-empty'}
 					style={{ marginRight: 'auto' }}
 				>
-					{msg('file-system.confirm-clear.dont-show-again')}
-				</Button>
-				<Button type="normal" onClick={onCancel}>
-					{msg('file-system.confirm-clear.cancel')}
-				</Button>
-				<Button
+					<TldrawUiButtonCheck checked={dontShowAgain} />
+					<TldrawUiButtonLabel>
+						{msg('file-system.confirm-clear.dont-show-again')}
+					</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton type="normal" onClick={onCancel}>
+					<TldrawUiButtonLabel>{msg('file-system.confirm-clear.cancel')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton
 					type="primary"
 					onClick={async () => {
 						if (dontShowAgain) {
@@ -77,9 +81,9 @@ function ConfirmClearDialog({
 						onContinue()
 					}}
 				>
-					{msg('file-system.confirm-clear.continue')}
-				</Button>
-			</DialogFooter>
+					<TldrawUiButtonLabel>{msg('file-system.confirm-clear.continue')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</TldrawUiDialogFooter>
 		</>
 	)
 }

apps/dotcom/src/utils/shouldLeaveSharedProject.tsx

@@ -1,11 +1,13 @@
 import {
-	Button,
-	DialogBody,
-	DialogCloseButton,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
 	TLUiDialogsContextType,
+	TldrawUiButton,
+	TldrawUiButtonCheck,
+	TldrawUiButtonLabel,
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+	TldrawUiDialogTitle,
 	useLocalStorageState,
 	useTranslation,
 } from '@tldraw/tldraw'
@@ -50,24 +52,26 @@ function ConfirmLeaveDialog({
 
 	return (
 		<>
-			<DialogHeader>
-				<DialogTitle>{msg('sharing.confirm-leave.title')}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody style={{ maxWidth: 350 }}>{msg('sharing.confirm-leave.description')}</DialogBody>
-			<DialogFooter className="tlui-dialog__footer__actions">
-				<Button
+			<TldrawUiDialogHeader>
+				<TldrawUiDialogTitle>{msg('sharing.confirm-leave.title')}</TldrawUiDialogTitle>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody style={{ maxWidth: 350 }}>
+				{msg('sharing.confirm-leave.description')}
+			</TldrawUiDialogBody>
+			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+				<TldrawUiButton
 					type="normal"
-					onClick={() => setDontShowAgain(!dontShowAgain)}
-					iconLeft={dontShowAgain ? 'checkbox-checked' : 'checkbox-empty'}
 					style={{ marginRight: 'auto' }}
+					onClick={() => setDontShowAgain(!dontShowAgain)}
 				>
-					{msg('sharing.confirm-leave.dont-show-again')}
-				</Button>
-				<Button type="normal" onClick={onCancel}>
-					{msg('sharing.confirm-leave.cancel')}
-				</Button>
-				<Button
+					<TldrawUiButtonCheck checked={dontShowAgain} />
+					<TldrawUiButtonLabel>{msg('sharing.confirm-leave.dont-show-again')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton type="normal" onClick={onCancel}>
+					<TldrawUiButtonLabel>{msg('sharing.confirm-leave.cancel')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton
 					type="primary"
 					onClick={async () => {
 						if (dontShowAgain) {
@@ -76,9 +80,9 @@ function ConfirmLeaveDialog({
 						onContinue()
 					}}
 				>
-					{msg('sharing.confirm-leave.leave')}
-				</Button>
-			</DialogFooter>
+					<TldrawUiButtonLabel>{msg('sharing.confirm-leave.leave')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</TldrawUiDialogFooter>
 		</>
 	)
 }

apps/dotcom/src/utils/shouldOverrideDocument.tsx

@@ -1,11 +1,13 @@
 import {
-	Button,
-	DialogBody,
-	DialogCloseButton,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
 	TLUiDialogsContextType,
+	TldrawUiButton,
+	TldrawUiButtonCheck,
+	TldrawUiButtonLabel,
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+	TldrawUiDialogTitle,
 	useTranslation,
 } from '@tldraw/tldraw'
 import { useState } from 'react'
@@ -49,26 +51,28 @@ function ConfirmOpenDialog({
 	const [dontShowAgain, setDontShowAgain] = useState(false)
 	return (
 		<>
-			<DialogHeader>
-				<DialogTitle>{msg('file-system.confirm-open.title')}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody style={{ maxWidth: 350 }}>
+			<TldrawUiDialogHeader>
+				<TldrawUiDialogTitle>{msg('file-system.confirm-open.title')}</TldrawUiDialogTitle>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody style={{ maxWidth: 350 }}>
 				{msg('file-system.confirm-open.description')}
-			</DialogBody>
-			<DialogFooter className="tlui-dialog__footer__actions">
-				<Button
+			</TldrawUiDialogBody>
+			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+				<TldrawUiButton
 					type="normal"
 					onClick={() => setDontShowAgain(!dontShowAgain)}
-					iconLeft={dontShowAgain ? 'checkbox-checked' : 'checkbox-empty'}
 					style={{ marginRight: 'auto' }}
 				>
-					{msg('file-system.confirm-open.dont-show-again')}
-				</Button>
-				<Button type="normal" onClick={onCancel}>
-					{msg('file-system.confirm-open.cancel')}
-				</Button>
-				<Button
+					<TldrawUiButtonCheck checked={dontShowAgain} />
+					<TldrawUiButtonLabel>
+						{msg('file-system.confirm-open.dont-show-again')}
+					</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton type="normal" onClick={onCancel}>
+					<TldrawUiButtonLabel>{msg('file-system.confirm-open.cancel')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton
 					type="primary"
 					onClick={async () => {
 						if (dontShowAgain) {
@@ -77,9 +81,9 @@ function ConfirmOpenDialog({
 						onContinue()
 					}}
 				>
-					{msg('file-system.confirm-open.open')}
-				</Button>
-			</DialogFooter>
+					<TldrawUiButtonLabel>{msg('file-system.confirm-open.open')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</TldrawUiDialogFooter>
 		</>
 	)
 }

apps/examples/src/examples/context-toolbar/ContextToolbar.tsx

@@ -1,8 +1,8 @@
 import {
 	DefaultSizeStyle,
-	Icon,
 	SharedStyleMap,
 	Tldraw,
+	TldrawUiIcon,
 	TLEditorComponents,
 	track,
 	useEditor,
@@ -85,7 +85,7 @@ const ContextToolbarComponent = track(() => {
 									editor.setStyleForSelectedShapes(DefaultSizeStyle, value, { squashing: false })
 								}
 							>
-								<Icon icon={icon} />
+								<TldrawUiIcon icon={icon} />
 							</div>
 						)
 					})}

apps/examples/src/examples/custom-quick-actions/CustomQuickActions.tsx

@@ -1,9 +1,9 @@
 import {
-	Button,
 	DefaultQuickActions,
 	DefaultQuickActionsContent,
 	TLComponents,
 	Tldraw,
+	TldrawUiMenuItem,
 } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
@@ -11,7 +11,7 @@ function CustomQuickActions() {
 	return (
 		<DefaultQuickActions>
 			<DefaultQuickActionsContent />
-			<Button type="icon" icon="code" smallIcon />
+			<TldrawUiMenuItem id="code" icon="code" onSelect={() => window.alert('code')} />
 		</DefaultQuickActions>
 	)
 }

apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx

@@ -1,11 +1,12 @@
 import {
-	Button,
 	DefaultColorStyle,
 	DefaultStylePanel,
 	DefaultStylePanelContent,
 	TLComponents,
 	TLUiStylePanelProps,
 	Tldraw,
+	TldrawUiButton,
+	TldrawUiButtonLabel,
 	useEditor,
 } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
@@ -17,22 +18,22 @@ function CustomStylePanel(props: TLUiStylePanelProps) {
 
 	return (
 		<DefaultStylePanel {...props}>
-			<Button
+			<TldrawUiButton
 				type="menu"
 				onClick={() => {
 					editor.setStyleForSelectedShapes(DefaultColorStyle, 'red', { squashing: true })
 				}}
 			>
-				Red
-			</Button>
-			<Button
+				<TldrawUiButtonLabel>Red</TldrawUiButtonLabel>
+			</TldrawUiButton>
+			<TldrawUiButton
 				type="menu"
 				onClick={() => {
 					editor.setStyleForSelectedShapes(DefaultColorStyle, 'green', { squashing: true })
 				}}
 			>
-				Green
-			</Button>
+				<TldrawUiButtonLabel>Green</TldrawUiButtonLabel>
+			</TldrawUiButton>
 			<DefaultStylePanelContent relevantStyles={props.relevantStyles} />
 		</DefaultStylePanel>
 	)

apps/examples/src/examples/ui-components-hidden/UiComponentsHiddenExample.tsx

@@ -17,6 +17,9 @@ const components: Required<TLUiComponents> = {
 	QuickActions: null,
 	HelperButtons: null,
 	DebugMenu: null,
+	SharePanel: null,
+	MenuPanel: null,
+	TopPanel: null,
 }
 
 export default function UiComponentsHiddenExample() {

apps/examples/src/examples/zones/ZonesExample.tsx

@@ -1,13 +1,18 @@
-import { Tldraw } from '@tldraw/tldraw'
+import { TLComponents, Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
 // There's a guide at the bottom of this file!
 
+const components: TLComponents = {
+	SharePanel: CustomShareZone,
+	TopPanel: CustomTopZone,
+}
+
 // [1]
 export default function Example() {
 	return (
 		<div className="tldraw__editor">
-			<Tldraw topZone={<CustomTopZone />} shareZone={<CustomShareZone />} />
+			<Tldraw components={components} />
 		</div>
 	)
 }
@@ -46,8 +51,8 @@ function CustomShareZone() {
 }
 
 /* 
-This example shows how to pass in a custom component to the share zone and top zone.
-The share zone is in the top right corner above the style menu, the top zone is in 
+This example shows how to pass in a custom component to the share panel and top panel.
+The share panel is in the top right corner above the style menu, the top panel is in 
 the top center.
 
 [1]

packages/tldraw/api-report.md

@@ -28,6 +28,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LANGUAGES } from '@tldraw/editor';
 import { Mat } from '@tldraw/editor';
 import { MatModel } from '@tldraw/editor';
+import { MemoExoticComponent } from 'react';
 import { MigrationFailureReason } from '@tldraw/editor';
 import { Migrations } from '@tldraw/editor';
 import { NamedExoticComponent } from 'react';
@@ -49,6 +50,7 @@ import { ShapeUtil } from '@tldraw/editor';
 import { SharedStyle } from '@tldraw/editor';
 import { StateNode } from '@tldraw/editor';
 import { StoreSnapshot } from '@tldraw/editor';
+import { StyleProp } from '@tldraw/editor';
 import { SvgExportContext } from '@tldraw/editor';
 import { T } from '@tldraw/editor';
 import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
@@ -265,9 +267,6 @@ export function BreakPointProvider({ forceMobile, children, }: {
 // @internal (undocumented)
 export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void;
 
-// @public (undocumented)
-export const Button: React_3.ForwardRefExoticComponent<TLUiButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
-
 // @public
 export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;
 
@@ -360,21 +359,6 @@ export const DefaultZoomMenu: NamedExoticComponent<TLUiZoomMenuProps>;
 // @public (undocumented)
 export function DefaultZoomMenuContent(): JSX_2.Element;
 
-// @public (undocumented)
-export function DialogBody({ className, children, style }: TLUiDialogBodyProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DialogCloseButton(): JSX_2.Element;
-
-// @public (undocumented)
-export function DialogFooter({ className, children }: TLUiDialogFooterProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DialogHeader({ className, children }: TLUiDialogHeaderProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DialogTitle({ className, children }: TLUiDialogTitleProps): JSX_2.Element;
-
 // @public
 export function downsizeImage(blob: Blob, width: number, height: number, opts?: {
     type?: string | undefined;
@@ -439,36 +423,6 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
     static type: "draw";
 }
 
-// @public (undocumented)
-export function DropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuGroup({ children, size }: TLUiDropdownMenuGroupProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuIndicator(): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuItem({ noClose, ...props }: TLUiDropdownMenuItemProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuRadioItem({ children, ...rest }: TLUiDropdownMenuRadioItemProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element;
-
-// @public (undocumented)
-export function DropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element;
-
 // @public (undocumented)
 export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
     // (undocumented)
@@ -815,9 +769,6 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
     static type: "highlight";
 }
 
-// @public (undocumented)
-export const Icon: NamedExoticComponent<TLUiIconProps>;
-
 // @public (undocumented)
 export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     // (undocumented)
@@ -856,9 +807,6 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
     static type: "image";
 }
 
-// @public (undocumented)
-export const Input: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
-
 // @public (undocumented)
 export function isGifAnimated(file: Blob): Promise<boolean>;
 
@@ -1059,15 +1007,6 @@ export function parseTldrawJsonFile({ json, schema, }: {
     json: string;
 }): Result<TLStore, TldrawFileParseError>;
 
-// @public (undocumented)
-export function Popover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
-
-// @public (undocumented)
-export function PopoverContent({ side, children, align, sideOffset, alignOffset, }: TLUiPopoverContentProps): JSX_2.Element;
-
-// @public (undocumented)
-export function PopoverTrigger({ children, ...rest }: TLUiPopoverTriggerProps): JSX_2.Element;
-
 // @public
 export function removeFrame(editor: Editor, ids: TLShapeId[]): void;
 
@@ -1292,13 +1231,25 @@ export interface TldrawUiBaseProps {
     components?: TLUiComponents;
     hideUi?: boolean;
     renderDebugMenuItems?: () => React_2.ReactNode;
-    shareZone?: ReactNode;
-    // @internal
-    topZone?: ReactNode;
 }
 
 // @public (undocumented)
-export function TldrawUiComponentsProvider({ overrides, children, }: ComponentsContextProviderProps): JSX_2.Element;
+export const TldrawUiButton: React_3.ForwardRefExoticComponent<TLUiButtonProps & React_3.RefAttributes<HTMLButtonElement>>;
+
+// @public (undocumented)
+export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element;
+
+// @public (undocumented)
+export const TldrawUiButtonPicker: MemoExoticComponent<(<T extends string>(props: TLUiButtonPickerProps<T>) => JSX_2.Element)>;
+
+// @public (undocumented)
+export function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element;
 
 // @public (undocumented)
 export function TldrawUiContextProvider({ overrides, components, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX_2.Element;
@@ -1313,6 +1264,57 @@ export interface TldrawUiContextProviderProps {
     overrides?: TLUiOverrides | TLUiOverrides[];
 }
 
+// @public (undocumented)
+export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDialogCloseButton(): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDialogTitle({ className, children }: TLUiDialogTitleProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuGroup({ children, size, }: TLUiDropdownMenuGroupProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuIndicator(): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuSubTrigger({ label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element;
+
+// @public (undocumented)
+export const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
+
+// @public (undocumented)
+export const TldrawUiInput: React_3.ForwardRefExoticComponent<TLUiInputProps & React_3.RefAttributes<HTMLInputElement>>;
+
+// @public (undocumented)
+export function TldrawUiKbd({ children }: TLUiKbdProps): JSX_2.Element | null;
+
 // @public (undocumented)
 export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
 
@@ -1328,9 +1330,21 @@ export function TldrawUiMenuItem<TranslationKey extends string = string, IconTyp
 // @public (undocumented)
 export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): any;
 
+// @public (undocumented)
+export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, }: TLUiPopoverContentProps): JSX_2.Element;
+
+// @public (undocumented)
+export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps): JSX_2.Element;
+
 // @public
 export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps;
 
+// @internal (undocumented)
+export const TldrawUiSlider: NamedExoticComponent<TLUiSliderProps>;
+
 // @public (undocumented)
 export interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
     // (undocumented)
@@ -1364,29 +1378,44 @@ export type TLUiActionsMenuProps = {
 // @public (undocumented)
 export type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>;
 
+// @public (undocumented)
+export type TLUiButtonCheckProps = {
+    checked: boolean;
+};
+
+// @public (undocumented)
+export type TLUiButtonIconProps = {
+    icon: string;
+    small?: boolean;
+    invertIcon?: boolean;
+};
+
+// @public (undocumented)
+export type TLUiButtonLabelProps = {
+    children?: any;
+};
+
+// @public (undocumented)
+export interface TLUiButtonPickerProps<T extends string> {
+    // (undocumented)
+    items: StyleValuesForUi<T>;
+    // (undocumented)
+    onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void;
+    // (undocumented)
+    style: StyleProp<T>;
+    // (undocumented)
+    title: string;
+    // (undocumented)
+    uiType: string;
+    // (undocumented)
+    value: SharedStyle<T>;
+}
+
 // @public (undocumented)
 export interface TLUiButtonProps extends React_3.HTMLAttributes<HTMLButtonElement> {
     // (undocumented)
     disabled?: boolean;
     // (undocumented)
-    icon?: Exclude<string, TLUiIconType> | TLUiIconType;
-    // (undocumented)
-    iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
-    // (undocumented)
-    invertIcon?: boolean;
-    // (undocumented)
-    isChecked?: boolean;
-    // (undocumented)
-    kbd?: string;
-    // (undocumented)
-    label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
-    // (undocumented)
-    loading?: boolean;
-    // (undocumented)
-    smallIcon?: boolean;
-    // (undocumented)
-    spinner?: boolean;
-    // (undocumented)
     type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool';
 }
 
@@ -1395,6 +1424,12 @@ export type TLUiComponents = Partial<{
     [K in keyof BaseTLUiComponents]: BaseTLUiComponents[K] | null;
 }>;
 
+// @public (undocumented)
+export type TLUiComponentsProviderProps = {
+    overrides?: TLUiComponents;
+    children: any;
+};
+
 // @public (undocumented)
 export interface TLUiContextMenuProps {
     // (undocumented)
@@ -1491,23 +1526,11 @@ export type TLUiDropdownMenuGroupProps = {
 };
 
 // @public (undocumented)
-export interface TLUiDropdownMenuItemProps extends TLUiButtonProps {
-    // (undocumented)
-    noClose?: boolean;
-}
-
-// @public (undocumented)
-export interface TLUiDropdownMenuRadioItemProps {
-    // (undocumented)
-    checked?: boolean;
+export interface TLUiDropdownMenuItemProps {
     // (undocumented)
     children: any;
     // (undocumented)
-    disabled?: boolean;
-    // (undocumented)
-    onSelect?: (e: Event) => void;
-    // (undocumented)
-    title: string;
+    noClose?: boolean;
 }
 
 // @public (undocumented)
@@ -1533,7 +1556,7 @@ export type TLUiDropdownMenuSubTriggerProps = {
 };
 
 // @public (undocumented)
-export interface TLUiDropdownMenuTriggerProps extends TLUiButtonProps {
+export interface TLUiDropdownMenuTriggerProps {
     // (undocumented)
     children?: any;
 }
@@ -1772,6 +1795,12 @@ export interface TLUiInputProps {
     value?: string;
 }
 
+// @public (undocumented)
+export interface TLUiKbdProps {
+    // (undocumented)
+    children: string;
+}
+
 // @public (undocumented)
 export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
     children?: any;
@@ -1867,7 +1896,7 @@ export type TLUiPopoverProps = {
 };
 
 // @public (undocumented)
-export interface TLUiPopoverTriggerProps extends TLUiButtonProps {
+export interface TLUiPopoverTriggerProps {
     // (undocumented)
     children?: React_2.ReactNode;
 }
@@ -1877,6 +1906,22 @@ export type TLUiQuickActionsProps = {
     children?: any;
 };
 
+// @internal (undocumented)
+export interface TLUiSliderProps {
+    // (undocumented)
+    'data-testid'?: string;
+    // (undocumented)
+    label: string;
+    // (undocumented)
+    onValueChange: (value: number, emphemeral: boolean) => void;
+    // (undocumented)
+    steps: number;
+    // (undocumented)
+    title: string;
+    // (undocumented)
+    value: null | number;
+}
+
 // @public (undocumented)
 export type TLUiStylePanelContentProps = {
     relevantStyles: ReturnType<typeof useRelevantStyles>;
@@ -2080,6 +2125,9 @@ export function useTldrawUiComponents(): Partial<{
     QuickActions: ComponentType<TLUiQuickActionsProps> | null;
     HelperButtons: ComponentType<TLUiHelperButtonsProps> | null;
     DebugMenu: ComponentType | null;
+    MenuPanel: ComponentType | null;
+    TopPanel: ComponentType | null;
+    SharePanel: ComponentType | null;
 }>;
 
 // @public (undocumented)

packages/tldraw/src/index.ts

@@ -42,9 +42,6 @@ export { TldrawUi, type TldrawUiBaseProps, type TldrawUiProps } from './lib/ui/T
 export { setDefaultUiAssetUrls, type TLUiAssetUrlOverrides } from './lib/ui/assetUrls'
 export { OfflineIndicator } from './lib/ui/components/OfflineIndicator/OfflineIndicator'
 export { Spinner } from './lib/ui/components/Spinner'
-export { Button, type TLUiButtonProps } from './lib/ui/components/primitives/Button'
-export { Icon, type TLUiIconProps } from './lib/ui/components/primitives/Icon'
-export { Input, type TLUiInputProps } from './lib/ui/components/primitives/Input'
 export {
 	TldrawUiContextProvider,
 	type TldrawUiContextProviderProps,
@@ -99,7 +96,7 @@ export {
 export { type TLUiTranslationKey } from './lib/ui/hooks/useTranslation/TLUiTranslationKey'
 export { type TLUiTranslation } from './lib/ui/hooks/useTranslation/translations'
 export {
-	useTranslation as useTranslation,
+	useTranslation,
 	type TLUiTranslationContextType,
 } from './lib/ui/hooks/useTranslation/useTranslation'
 export { type TLUiIconType } from './lib/ui/icon-types'
@@ -137,35 +134,13 @@ export { DefaultMinimap } from './lib/ui/components/Minimap/DefaultMinimap'
 // Helper to unwrap label from action items
 export { unwrapLabel } from './lib/ui/context/actions'
 
-// General UI components for building menus
-export {
-	TldrawUiMenuCheckboxItem,
-	type TLUiMenuCheckboxItemProps,
-} from './lib/ui/components/menus/TldrawUiMenuCheckboxItem'
-export {
-	TldrawUiMenuContextProvider,
-	type TLUiMenuContextProviderProps,
-} from './lib/ui/components/menus/TldrawUiMenuContext'
-export {
-	TldrawUiMenuGroup,
-	type TLUiMenuGroupProps,
-} from './lib/ui/components/menus/TldrawUiMenuGroup'
-export {
-	TldrawUiMenuItem,
-	type TLUiMenuItemProps,
-} from './lib/ui/components/menus/TldrawUiMenuItem'
-export {
-	TldrawUiMenuSubmenu,
-	type TLUiMenuSubmenuProps,
-} from './lib/ui/components/menus/TldrawUiMenuSubmenu'
-
 export {
 	TldrawUiComponentsProvider,
 	useTldrawUiComponents,
 	type TLUiComponents,
+	type TLUiComponentsProviderProps,
 } from './lib/ui/context/components'
 
-// Menus / UI elements that can be customized
 export { DefaultPageMenu } from './lib/ui/components/PageMenu/DefaultPageMenu'
 
 export {
@@ -236,45 +211,108 @@ export { DefaultToolbar } from './lib/ui/components/Toolbar/DefaultToolbar'
 
 export { type TLComponents } from './lib/Tldraw'
 
+/* ------------------- Primitives ------------------- */
+
+// Button
 export {
-	DialogBody,
-	DialogCloseButton,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
+	TldrawUiButton,
+	type TLUiButtonProps,
+} from './lib/ui/components/primitives/Button/TldrawUiButton'
+export {
+	TldrawUiButtonCheck,
+	type TLUiButtonCheckProps,
+} from './lib/ui/components/primitives/Button/TldrawUiButtonCheck'
+export {
+	TldrawUiButtonIcon,
+	type TLUiButtonIconProps,
+} from './lib/ui/components/primitives/Button/TldrawUiButtonIcon'
+export {
+	TldrawUiButtonLabel,
+	type TLUiButtonLabelProps,
+} from './lib/ui/components/primitives/Button/TldrawUiButtonLabel'
+
+// Button picker
+export {
+	TldrawUiButtonPicker,
+	type TLUiButtonPickerProps,
+} from './lib/ui/components/primitives/TldrawUiButtonPicker'
+
+// Dialog
+export {
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+	TldrawUiDialogTitle,
 	type TLUiDialogBodyProps,
 	type TLUiDialogFooterProps,
 	type TLUiDialogHeaderProps,
 	type TLUiDialogTitleProps,
-} from './lib/ui/components/primitives/Dialog'
+} from './lib/ui/components/primitives/TldrawUiDialog'
 
+// Dropdown Menu
 export {
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuIndicator,
-	DropdownMenuItem,
-	DropdownMenuRadioItem,
-	DropdownMenuRoot,
-	DropdownMenuSub,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
+	TldrawUiDropdownMenuCheckboxItem,
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuGroup,
+	TldrawUiDropdownMenuIndicator,
+	TldrawUiDropdownMenuItem,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuSub,
+	TldrawUiDropdownMenuSubTrigger,
+	TldrawUiDropdownMenuTrigger,
 	type TLUiDropdownMenuCheckboxItemProps,
 	type TLUiDropdownMenuContentProps,
 	type TLUiDropdownMenuGroupProps,
 	type TLUiDropdownMenuItemProps,
-	type TLUiDropdownMenuRadioItemProps,
 	type TLUiDropdownMenuRootProps,
 	type TLUiDropdownMenuSubProps,
 	type TLUiDropdownMenuSubTriggerProps,
 	type TLUiDropdownMenuTriggerProps,
-} from './lib/ui/components/primitives/DropdownMenu'
+} from './lib/ui/components/primitives/TldrawUiDropdownMenu'
 
+// Icon
+export { TldrawUiIcon, type TLUiIconProps } from './lib/ui/components/primitives/TldrawUiIcon'
+
+// Input
+export { TldrawUiInput, type TLUiInputProps } from './lib/ui/components/primitives/TldrawUiInput'
+
+// Kbd
+export { TldrawUiKbd, type TLUiKbdProps } from './lib/ui/components/primitives/TldrawUiKbd'
+
+// Popover
 export {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
 	type TLUiPopoverContentProps,
 	type TLUiPopoverProps,
 	type TLUiPopoverTriggerProps,
-} from './lib/ui/components/primitives/Popover'
+} from './lib/ui/components/primitives/TldrawUiPopover'
+
+// Slider
+export { TldrawUiSlider, type TLUiSliderProps } from './lib/ui/components/primitives/TldrawUiSlider'
+
+/* ----------------- Menu Primitives ---------------- */
+
+// General UI components for building menus
+export {
+	TldrawUiMenuCheckboxItem,
+	type TLUiMenuCheckboxItemProps,
+} from './lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem'
+export {
+	TldrawUiMenuContextProvider,
+	type TLUiMenuContextProviderProps,
+} from './lib/ui/components/primitives/menus/TldrawUiMenuContext'
+export {
+	TldrawUiMenuGroup,
+	type TLUiMenuGroupProps,
+} from './lib/ui/components/primitives/menus/TldrawUiMenuGroup'
+export {
+	TldrawUiMenuItem,
+	type TLUiMenuItemProps,
+} from './lib/ui/components/primitives/menus/TldrawUiMenuItem'
+export {
+	TldrawUiMenuSubmenu,
+	type TLUiMenuSubmenuProps,
+} from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'

packages/tldraw/src/lib/styles.tsx

@@ -3,6 +3,7 @@ export type StyleValuesForUi<T> = readonly {
 	readonly icon: string
 }[]
 
+// todo: default styles prop?
 export const STYLES = {
 	color: [
 		{ value: 'black', icon: 'color' },

packages/tldraw/src/lib/ui.css

@@ -75,6 +75,10 @@
 	opacity: 1;
 }
 
+.tlui-button__icon + .tlui-button__label {
+	margin-left: var(--space-2);
+}
+
 @media (hover: hover) {
 	.tlui-button::after {
 		background-color: var(--color-muted-2);
@@ -127,46 +131,6 @@
 	position: relative;
 }
 
-/* Icon button */
-
-.tlui-button__icon {
-	height: 40px;
-	width: 40px;
-	min-height: 40px;
-	min-width: 40px;
-	padding: 0px;
-}
-
-.tlui-button__icon-left {
-	margin-right: var(--space-2);
-}
-
-/* Hinted */
-
-.tlui-button__icon[data-state='hinted']::after {
-	background: var(--color-hint);
-	opacity: 1;
-	/* box-shadow: inset 0 0 0 1px var(--color-muted-1); */
-}
-
-.tlui-button__icon[data-state='hinted']:not(:disabled, :focus-visible):active::after {
-	background: var(--color-hint);
-	opacity: 1;
-	/* box-shadow: inset 0 0 0 1px var(--color-text-3); */
-}
-
-@media (hover: hover) {
-	.tlui-button__icon::after {
-		inset: 4px;
-		border-radius: var(--radius-2);
-	}
-
-	.tlui-button__icon[data-state='hinted']:not(:disabled, :focus-visible):hover::after {
-		background: var(--color-hint);
-		/* box-shadow: inset 0 0 0 1px var(--color-text-3); */
-	}
-}
-
 /* Menu button */
 
 .tlui-button__menu {
@@ -1225,11 +1189,6 @@
 	width: 128px;
 }
 
-.tlui-page-menu__trigger > span {
-	flex-grow: 2;
-	margin-right: var(--space-4);
-}
-
 .tlui-page-menu__header {
 	display: flex;
 	flex-direction: row;
@@ -1373,17 +1332,29 @@
 
 .tlui-page_menu__item__submenu[data-isediting='true'] {
 	display: block;
+	opacity: 1;
+}
+
+.tlui-page_menu__item__submenu > .tlui-button {
+	opacity: 0;
+}
+
+.tlui-page-menu__item__button .tlui-button__icon {
+	margin-right: 4px;
 }
 
 @media (hover: hover) {
 	.tlui-page_menu__item__submenu {
-		opacity: 0;
 		display: block;
 	}
 
-	.tlui-page_menu__item__submenu:hover,
-	.tlui-page-menu__item:focus-within > .tlui-page_menu__item__submenu,
-	.tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu {
+	.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button {
+		opacity: 0;
+	}
+
+	.tlui-page_menu__item__submenu > .tlui-button[data-state='open'],
+	.tlui-page_menu__item__submenu:hover > .tlui-button,
+	.tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu > .tlui-button {
 		opacity: 1;
 	}
 }

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -6,9 +6,9 @@ import { TLUiAssetUrlOverrides } from './assetUrls'
 import { DebugPanel } from './components/DebugPanel'
 import { Dialogs } from './components/Dialogs'
 import { FollowingIndicator } from './components/FollowingIndicator'
-import { MenuZone } from './components/MenuZone'
 import { ToastViewport, Toasts } from './components/Toasts'
-import { Button } from './components/primitives/Button'
+import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'
 import { PORTRAIT_BREAKPOINT } from './constants'
 import {
 	TldrawUiContextProvider,
@@ -20,6 +20,7 @@ import { TLUiComponents, useTldrawUiComponents } from './context/components'
 import { useNativeClipboardEvents } from './hooks/useClipboardEvents'
 import { useEditorEvents } from './hooks/useEditorEvents'
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
+import { useReadonly } from './hooks/useReadonly'
 import { useRelevantStyles } from './hooks/useRevelantStyles'
 import { useTranslation } from './hooks/useTranslation/useTranslation'
 
@@ -51,17 +52,6 @@ export interface TldrawUiBaseProps {
 	 */
 	components?: TLUiComponents
 
-	/**
-	 * A component to use for the share zone (will be deprecated)
-	 */
-	shareZone?: ReactNode
-
-	/**
-	 * A component to use for the top zone (will be deprecated)
-	 * @internal
-	 */
-	topZone?: ReactNode
-
 	/**
 	 * Additional items to add to the debug menu (will be deprecated)
 	 */
@@ -75,8 +65,6 @@ export interface TldrawUiBaseProps {
  * @public
  */
 export const TldrawUi = React.memo(function TldrawUi({
-	shareZone,
-	topZone,
 	renderDebugMenuItems,
 	children,
 	hideUi,
@@ -85,12 +73,7 @@ export const TldrawUi = React.memo(function TldrawUi({
 }: TldrawUiProps) {
 	return (
 		<TldrawUiContextProvider {...rest} components={components}>
-			<TldrawUiInner
-				hideUi={hideUi}
-				shareZone={shareZone}
-				topZone={topZone}
-				renderDebugMenuItems={renderDebugMenuItems}
-			>
+			<TldrawUiInner hideUi={hideUi} renderDebugMenuItems={renderDebugMenuItems}>
 				{children}
 			</TldrawUiInner>
 		</TldrawUiContextProvider>
@@ -121,17 +104,24 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 	)
 })
 
-const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone }: TldrawUiContentProps) {
+const TldrawUiContent = React.memo(function TldrawUI() {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
-	const isReadonlyMode = useValue('isReadonlyMode', () => editor.getInstanceState().isReadonly, [
-		editor,
-	])
+	const isReadonlyMode = useReadonly()
 	const isFocusMode = useValue('focus', () => editor.getInstanceState().isFocusMode, [editor])
 	const isDebugMode = useValue('debug', () => editor.getInstanceState().isDebugMode, [editor])
 
-	const { StylePanel, Toolbar, HelpMenu, NavigationPanel, HelperButtons } = useTldrawUiComponents()
+	const {
+		SharePanel,
+		TopPanel,
+		MenuPanel,
+		StylePanel,
+		Toolbar,
+		HelpMenu,
+		NavigationPanel,
+		HelperButtons,
+	} = useTldrawUiComponents()
 
 	useKeyboardShortcuts()
 	useNativeClipboardEvents()
@@ -149,24 +139,25 @@ const TldrawUiContent = React.memo(function TldrawUI({ shareZone, topZone }: Tld
 			>
 				{isFocusMode ? (
 					<div className="tlui-layout__top">
-						<Button
+						<TldrawUiButton
 							type="icon"
 							className="tlui-focus-button"
-							title={`${msg('focus-mode.toggle-focus-mode')}`}
-							icon="dot"
+							title={msg('focus-mode.toggle-focus-mode')}
 							onClick={() => toggleFocus.onSelect('menu')}
-						/>
+						>
+							<TldrawUiButtonIcon icon="dot" />
+						</TldrawUiButton>
 					</div>
 				) : (
 					<>
 						<div className="tlui-layout__top">
 							<div className="tlui-layout__top__left">
-								<MenuZone />
+								{MenuPanel && <MenuPanel />}
 								{HelperButtons && <HelperButtons />}
 							</div>
-							<div className="tlui-layout__top__center">{topZone}</div>
+							<div className="tlui-layout__top__center">{TopPanel && <TopPanel />}</div>
 							<div className="tlui-layout__top__right">
-								{shareZone}
+								{SharePanel && <SharePanel />}
 								{StylePanel && breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
 									<_StylePanel />
 								)}

packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -4,8 +4,14 @@ import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/Popover'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import {
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
+} from '../primitives/TldrawUiPopover'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
 
 /** @public */
@@ -37,16 +43,17 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 	if (isReadonlyMode && !isInAcceptableReadonlyState) return
 
 	return (
-		<Popover id="actions-menu">
-			<PopoverTrigger
-				className="tlui-menu__trigger"
-				data-testid="main.action-menu"
-				icon="dots-vertical"
-				title={msg('actions-menu.title')}
-				type="icon" // needs to be here because the trigger also passes down type="button"
-				smallIcon
-			/>
-			<PopoverContent
+		<TldrawUiPopover id="actions-menu">
+			<TldrawUiPopoverTrigger>
+				<TldrawUiButton
+					type="icon"
+					data-testid="main.action-menu"
+					title={msg('actions-menu.title')}
+				>
+					<TldrawUiButtonIcon icon="dots-vertical" small />
+				</TldrawUiButton>
+			</TldrawUiPopoverTrigger>
+			<TldrawUiPopoverContent
 				side={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}
 				sideOffset={6}
 			>
@@ -55,7 +62,7 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 						{content}
 					</TldrawUiMenuContextProvider>
 				</div>
-			</PopoverContent>
-		</Popover>
+			</TldrawUiPopoverContent>
+		</TldrawUiPopover>
 	)
 })

packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -9,7 +9,7 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 /** @public */
 export function DefaultActionsMenuContent() {

packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx

@@ -2,7 +2,7 @@ import * as _ContextMenu from '@radix-ui/react-context-menu'
 import { preventDefault, useContainer, useEditor } from '@tldraw/editor'
 import { memo, useCallback } from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultContextMenuContent } from './DefaultContextMenuContent'
 
 /** @public */

packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx

@@ -17,7 +17,7 @@ import {
 	ToggleLockMenuItem,
 	UngroupMenuItem,
 } from '../menu-items'
-import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup'
+import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
 
 /** @public */
 export function DefaultContextMenuContent() {

packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenu.tsx

@@ -1,10 +1,12 @@
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import {
-	DropdownMenuContent,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultDebugMenuContent } from './DefaultDebugMenuContent'
 
 /** @public */
@@ -18,13 +20,17 @@ export function DefaultDebugMenu({ children }: TLUiDebugMenuProps) {
 	const content = children ?? <DefaultDebugMenuContent />
 
 	return (
-		<DropdownMenuRoot id="debug">
-			<DropdownMenuTrigger type="icon" icon="dots-horizontal" title={msg('debug-panel.more')} />
-			<DropdownMenuContent side="top" align="end" alignOffset={0}>
+		<TldrawUiDropdownMenuRoot id="debug">
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton type="icon" title={msg('debug-menu.title')}>
+					<TldrawUiButtonIcon icon="dots-horizontal" />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			<TldrawUiDropdownMenuContent side="top" align="end" alignOffset={0}>
 				<TldrawUiMenuContextProvider type="menu" sourceId="debug-panel">
 					{content}
 				</TldrawUiMenuContextProvider>
-			</DropdownMenuContent>
-		</DropdownMenuRoot>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
 	)
 }

packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx

@@ -1,4 +1,3 @@
-import { DialogTitle } from '@radix-ui/react-dialog'
 import {
 	DebugFlag,
 	Editor,
@@ -15,12 +14,20 @@ import React from 'react'
 import { useDialogs } from '../../context/dialogs'
 import { useToasts } from '../../context/toasts'
 import { untranslated } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuCheckboxItem } from '../menus/TldrawUiMenuCheckboxItem'
-import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
-import { TldrawUiMenuSubmenu } from '../menus/TldrawUiMenuSubmenu'
-import { Button } from '../primitives/Button'
-import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from '../primitives/Dialog'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'
+import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+	TldrawUiDialogTitle,
+} from '../primitives/TldrawUiDialog'
+import { TldrawUiMenuCheckboxItem } from '../primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'
 
 /** @public */
 export function DefaultDebugMenuContent() {
@@ -225,29 +232,29 @@ function ExampleDialog({
 
 	return (
 		<>
-			<DialogHeader>
-				<DialogTitle>{title}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody style={{ maxWidth: 350 }}>{body}</DialogBody>
-			<DialogFooter className="tlui-dialog__footer__actions">
+			<TldrawUiDialogHeader>
+				<TldrawUiDialogTitle>{title}</TldrawUiDialogTitle>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody style={{ maxWidth: 350 }}>{body}</TldrawUiDialogBody>
+			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
 				{displayDontShowAgain && (
-					<Button
+					<TldrawUiButton
 						type="normal"
 						onClick={() => setDontShowAgain(!dontShowAgain)}
-						iconLeft={dontShowAgain ? 'check' : 'checkbox-empty'}
 						style={{ marginRight: 'auto' }}
 					>
-						{`Don't show again`}
-					</Button>
+						<TldrawUiButtonCheck checked={dontShowAgain} />
+						<TldrawUiButtonLabel>Don't show again</TldrawUiButtonLabel>
+					</TldrawUiButton>
 				)}
-				<Button type="normal" onClick={onCancel}>
-					{cancel}
-				</Button>
-				<Button type="primary" onClick={async () => onContinue()}>
-					{confirm}
-				</Button>
-			</DialogFooter>
+				<TldrawUiButton type="normal" onClick={onCancel}>
+					<TldrawUiButtonLabel>{cancel}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+				<TldrawUiButton type="primary" onClick={async () => onContinue()}>
+					<TldrawUiButtonLabel>{confirm}</TldrawUiButtonLabel>
+				</TldrawUiButton>
+			</TldrawUiDialogFooter>
 		</>
 	)
 }

packages/tldraw/src/lib/ui/components/EditLinkDialog.tsx

@@ -3,9 +3,15 @@ import { T, TLBaseShape, track, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { TLUiDialogProps } from '../context/dialogs'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
-import { Button } from './primitives/Button'
-import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from './primitives/Dialog'
-import { Input } from './primitives/Input'
+import { TldrawUiButton } from './primitives/Button/TldrawUiButton'
+import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+} from './primitives/TldrawUiDialog'
+import { TldrawUiInput } from './primitives/TldrawUiInput'
 
 // A url can either be invalid, or valid with a protocol, or valid without a protocol.
 // For example, "aol.com" would be valid with a protocol ()
@@ -134,13 +140,13 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({
 
 	return (
 		<>
-			<DialogHeader>
+			<TldrawUiDialogHeader>
 				<DialogTitle>{msg('edit-link-title')}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody>
 				<div className="tlui-edit-link-dialog">
-					<Input
+					<TldrawUiInput
 						ref={rInput}
 						className="tlui-edit-link-dialog__input"
 						label="edit-link-url"
@@ -152,26 +158,26 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({
 					/>
 					<div>{urlInputState.valid ? msg('edit-link-detail') : msg('edit-link-invalid-url')}</div>
 				</div>
-			</DialogBody>
-			<DialogFooter className="tlui-dialog__footer__actions">
-				<Button type="normal" onClick={handleCancel} onTouchEnd={handleCancel}>
-					{msg('edit-link-cancel')}
-				</Button>
+			</TldrawUiDialogBody>
+			<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+				<TldrawUiButton type="normal" onClick={handleCancel} onTouchEnd={handleCancel}>
+					<TldrawUiButtonLabel>{msg('edit-link-cancel')}</TldrawUiButtonLabel>
+				</TldrawUiButton>
 				{isRemoving ? (
-					<Button type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>
-						{msg('edit-link-clear')}
-					</Button>
+					<TldrawUiButton type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>
+						<TldrawUiButtonLabel>{msg('edit-link-clear')}</TldrawUiButtonLabel>
+					</TldrawUiButton>
 				) : (
-					<Button
+					<TldrawUiButton
 						type="primary"
 						disabled={!urlInputState.valid}
 						onTouchEnd={handleComplete}
 						onClick={handleComplete}
 					>
-						{msg('edit-link-save')}
-					</Button>
+						<TldrawUiButtonLabel>{msg('edit-link-save')}</TldrawUiButtonLabel>
+					</TldrawUiButton>
 				)}
-			</DialogFooter>
+			</TldrawUiDialogFooter>
 		</>
 	)
 })

packages/tldraw/src/lib/ui/components/EmbedDialog.tsx

@@ -5,10 +5,16 @@ import { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'
 import { useAssetUrls } from '../context/asset-urls'
 import { TLUiDialogProps } from '../context/dialogs'
 import { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'
-import { Button } from './primitives/Button'
-import { DialogBody, DialogCloseButton, DialogFooter, DialogHeader } from './primitives/Dialog'
-import { Icon } from './primitives/Icon'
-import { Input } from './primitives/Input'
+import { TldrawUiButton } from './primitives/Button/TldrawUiButton'
+import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogFooter,
+	TldrawUiDialogHeader,
+} from './primitives/TldrawUiDialog'
+import { TldrawUiIcon } from './primitives/TldrawUiIcon'
+import { TldrawUiInput } from './primitives/TldrawUiInput'
 
 export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) {
 	const editor = useEditor()
@@ -30,18 +36,18 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro
 
 	return (
 		<>
-			<DialogHeader>
+			<TldrawUiDialogHeader>
 				<DialogTitle>
 					{embedDefinition
 						? `${msg('embed-title')} — ${embedDefinition.title}`
 						: msg('embed-title')}
 				</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
 			{embedDefinition ? (
 				<>
-					<DialogBody className="tlui-embed-dialog__enter">
-						<Input
+					<TldrawUiDialogBody className="tlui-embed-dialog__enter">
+						<TldrawUiInput
 							className="tlui-embed-dialog__input"
 							label="embed-url"
 							placeholder="http://example.com"
@@ -77,7 +83,7 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro
 										className="tlui-embed-dialog__instruction__link"
 									>
 										Learn more.
-										<Icon icon="external-link" small />
+										<TldrawUiIcon icon="external-link" small />
 									</a>
 								)}
 							</div>
@@ -86,23 +92,25 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro
 								{showError ? msg('embed-invalid-url') : '\xa0'}
 							</div>
 						)}
-					</DialogBody>
-					<DialogFooter className="tlui-dialog__footer__actions">
-						<Button
+					</TldrawUiDialogBody>
+					<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
+						<TldrawUiButton
 							type="normal"
 							onClick={() => {
 								setEmbedDefinition(null)
 								setEmbedInfoForUrl(null)
 								setUrl('')
 							}}
-							label="embed-back"
-						/>
+						>
+							<TldrawUiButtonLabel>{msg('embed-back')}</TldrawUiButtonLabel>
+						</TldrawUiButton>
 						<div className="tlui-embed__spacer" />
-						<Button type="normal" label="embed-cancel" onClick={onClose} />
-						<Button
+						<TldrawUiButton type="normal" onClick={onClose}>
+							<TldrawUiButtonLabel>{msg('embed-cancel')}</TldrawUiButtonLabel>
+						</TldrawUiButton>
+						<TldrawUiButton
 							type="primary"
 							disabled={!embedInfoForUrl}
-							label="embed-create"
 							onClick={() => {
 								if (!embedInfoForUrl) return
 
@@ -115,28 +123,26 @@ export const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogPro
 
 								onClose()
 							}}
-						/>
-					</DialogFooter>
+						>
+							<TldrawUiButtonLabel>{msg('embed-create')}</TldrawUiButtonLabel>
+						</TldrawUiButton>
+					</TldrawUiDialogFooter>
 				</>
 			) : (
 				<>
-					<DialogBody className="tlui-embed-dialog__list">
+					<TldrawUiDialogBody className="tlui-embed-dialog__list">
 						{EMBED_DEFINITIONS.map((def) => {
 							return (
-								<Button
-									type="menu"
-									key={def.type}
-									onClick={() => setEmbedDefinition(def)}
-									label={untranslated(def.title)}
-								>
+								<TldrawUiButton type="menu" key={def.type} onClick={() => setEmbedDefinition(def)}>
+									<TldrawUiButtonLabel>{untranslated(def.title)}</TldrawUiButtonLabel>
 									<div
 										className="tlui-embed-dialog__item__image"
 										style={{ backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }}
 									/>
-								</Button>
+								</TldrawUiButton>
 							)
 						})}
-					</DialogBody>
+					</TldrawUiDialogBody>
 				</>
 			)}
 		</>

packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenu.tsx

@@ -2,12 +2,14 @@ import { memo } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import {
-	DropdownMenuContent,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultHelpMenuContent } from './DefaultHelpMenuContent'
 
 /** @public */
@@ -29,19 +31,18 @@ export const DefaultHelpMenu = memo(function DefaultHelpMenu({ children }: TLUiH
 
 	return (
 		<div className="tlui-help-menu">
-			<DropdownMenuRoot id="help menu">
-				<DropdownMenuTrigger
-					type="help"
-					smallIcon
-					title={msg('help-menu.title')}
-					icon="question-mark"
-				/>
-				<DropdownMenuContent side="top" align="end" alignOffset={0} sideOffset={8}>
+			<TldrawUiDropdownMenuRoot id="help menu">
+				<TldrawUiDropdownMenuTrigger>
+					<TldrawUiButton type="help" title={msg('help-menu.title')}>
+						<TldrawUiButtonIcon icon="question-mark" small />
+					</TldrawUiButton>
+				</TldrawUiDropdownMenuTrigger>
+				<TldrawUiDropdownMenuContent side="top" align="end" alignOffset={0} sideOffset={8}>
 					<TldrawUiMenuContextProvider type="menu" sourceId="help-menu">
 						{content}
 					</TldrawUiMenuContextProvider>
-				</DropdownMenuContent>
-			</DropdownMenuRoot>
+				</TldrawUiDropdownMenuContent>
+			</TldrawUiDropdownMenuRoot>
 		</div>
 	)
 })

packages/tldraw/src/lib/ui/components/HelpMenu/DefaultHelpMenuContent.tsx

@@ -1,7 +1,7 @@
 import { useTldrawUiComponents } from '../../context/components'
 import { useDialogs } from '../../context/dialogs'
 import { LanguageMenu } from '../LanguageMenu'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 /** @public */
 export function DefaultHelpMenuContent() {

packages/tldraw/src/lib/ui/components/HelperButtons/BackToContent.tsx

@@ -1,7 +1,7 @@
 import { useEditor } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 import { useActions } from '../../context/actions'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 export function BackToContent() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/HelperButtons/DefaultHelperButtons.tsx

@@ -1,4 +1,4 @@
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultHelperButtonsContent } from './DefaultHelperButtonsContent'
 
 /** @public */

packages/tldraw/src/lib/ui/components/HelperButtons/ExitPenMode.tsx

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { useActions } from '../../context/actions'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 export function ExitPenMode() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/HelperButtons/StopFollowing.tsx

@@ -1,6 +1,6 @@
 import { useEditor, useValue } from '@tldraw/editor'
 import { useActions } from '../../context/actions'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 export function StopFollowing() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog.tsx

@@ -2,8 +2,12 @@ import { DialogTitle } from '@radix-ui/react-dialog'
 import { memo } from 'react'
 import { TLUiDialogProps } from '../../context/dialogs'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
-import { DialogBody, DialogCloseButton, DialogHeader } from '../primitives/Dialog'
+import {
+	TldrawUiDialogBody,
+	TldrawUiDialogCloseButton,
+	TldrawUiDialogHeader,
+} from '../primitives/TldrawUiDialog'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultKeyboardShortcutsDialogContent } from './DefaultKeyboardShortcutsDialogContent'
 
 /** @public */
@@ -21,15 +25,15 @@ export const DefaultKeyboardShortcutsDialog = memo(function DefaultKeyboardShort
 
 	return (
 		<>
-			<DialogHeader className="tlui-shortcuts-dialog__header">
+			<TldrawUiDialogHeader className="tlui-shortcuts-dialog__header">
 				<DialogTitle>{msg('shortcuts-title')}</DialogTitle>
-				<DialogCloseButton />
-			</DialogHeader>
-			<DialogBody className="tlui-shortcuts-dialog__body">
+				<TldrawUiDialogCloseButton />
+			</TldrawUiDialogHeader>
+			<TldrawUiDialogBody className="tlui-shortcuts-dialog__body">
 				<TldrawUiMenuContextProvider type="keyboard-shortcuts" sourceId="kbd">
 					{content}
 				</TldrawUiMenuContextProvider>
-			</DialogBody>
+			</TldrawUiDialogBody>
 			<div className="tlui-dialog__scrim" />
 		</>
 	)

packages/tldraw/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -1,7 +1,7 @@
 import { useActions } from '../../context/actions'
 import { useTools } from '../../hooks/useTools'
-import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 /** @public */
 export function DefaultKeyboardShortcutsDialogContent() {

packages/tldraw/src/lib/ui/components/LanguageMenu.tsx

@@ -1,9 +1,9 @@
 import { useEditor } from '@tldraw/editor'
 import { useUiEvents } from '../context/events'
 import { useLanguages } from '../hooks/useTranslation/useLanguages'
-import { TldrawUiMenuCheckboxItem } from './menus/TldrawUiMenuCheckboxItem'
-import { TldrawUiMenuGroup } from './menus/TldrawUiMenuGroup'
-import { TldrawUiMenuSubmenu } from './menus/TldrawUiMenuSubmenu'
+import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
 
 export function LanguageMenu() {
 	const editor = useEditor()

packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenu.tsx

@@ -3,8 +3,9 @@ import { useContainer } from '@tldraw/editor'
 import { memo } from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
-import { Button } from '../primitives/Button'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultMainMenuContent } from './DefaultMainMenuContent'
 
 /** @public */
@@ -26,14 +27,9 @@ export const DefaultMainMenu = memo(function DefaultMainMenu({ children }: TLUiM
 	return (
 		<_Dropdown.Root dir="ltr" open={isOpen} onOpenChange={onOpenChange} modal={false}>
 			<_Dropdown.Trigger asChild dir="ltr">
-				<Button
-					type="icon"
-					className="tlui-menu__trigger"
-					data-testid="main.menu"
-					title={msg('menu.title')}
-					icon="menu"
-					smallIcon
-				/>
+				<TldrawUiButton type="icon" data-testid="main.menu" title={msg('menu.title')}>
+					<TldrawUiButtonIcon icon="menu" small />
+				</TldrawUiButton>
 			</_Dropdown.Trigger>
 			<_Dropdown.Portal container={container}>
 				<_Dropdown.Content

packages/tldraw/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -29,9 +29,9 @@ import {
 	ZoomToFitMenuItem,
 	ZoomToSelectionMenuItem,
 } from '../menu-items'
-import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
-import { TldrawUiMenuSubmenu } from '../menus/TldrawUiMenuSubmenu'
+import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuSubmenu } from '../primitives/menus/TldrawUiMenuSubmenu'
 
 /** @public */
 export function DefaultMainMenuContent() {

packages/tldraw/src/lib/ui/components/MenuPanel.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react'
+import { useBreakpoint } from '../context/breakpoints'
+import { useTldrawUiComponents } from '../context/components'
+
+/** @public */
+export const DefaultMenuPanel = memo(function MenuPanel() {
+	const breakpoint = useBreakpoint()
+
+	const { MainMenu, QuickActions, ActionsMenu, PageMenu } = useTldrawUiComponents()
+
+	if (!MainMenu && !PageMenu && breakpoint < 6) return null
+
+	return (
+		<div className="tlui-menu-zone">
+			<div className="tlui-buttons__horizontal">
+				{MainMenu && <MainMenu />}
+				{PageMenu && <PageMenu />}
+				{breakpoint < 6 ? null : (
+					<>
+						{QuickActions && <QuickActions />}
+						{ActionsMenu && <ActionsMenu />}
+					</>
+				)}
+			</div>
+		</div>
+	)
+})

packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx

@@ -9,8 +9,13 @@ import { useCallback } from 'react'
 import { useTldrawUiComponents } from '../context/components'
 import { useRelevantStyles } from '../hooks/useRevelantStyles'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
-import { Icon } from './primitives/Icon'
-import { Popover, PopoverContent, PopoverTrigger } from './primitives/Popover'
+import { TldrawUiButton } from './primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from './primitives/Button/TldrawUiButtonIcon'
+import {
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
+} from './primitives/TldrawUiPopover'
 
 export function MobileStylePanel() {
 	const editor = useEditor()
@@ -42,22 +47,24 @@ export function MobileStylePanel() {
 	if (!StylePanel) return null
 
 	return (
-		<Popover id="style menu" onOpenChange={handleStylesOpenChange}>
-			<PopoverTrigger
-				disabled={disableStylePanel}
-				type="tool"
-				data-testid="mobile.styles"
-				style={{
-					color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
-				}}
-				title={msg('style-panel.title')}
-			>
-				<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />
-			</PopoverTrigger>
-			<PopoverContent side="top" align="end">
+		<TldrawUiPopover id="mobile style menu" onOpenChange={handleStylesOpenChange}>
+			<TldrawUiPopoverTrigger>
+				<TldrawUiButton
+					type="tool"
+					title={msg('style-panel.title')}
+					data-testid="mobile.styles"
+					disabled={disableStylePanel}
+					style={{ color: disableStylePanel ? 'var(--color-muted-1)' : currentColor }}
+				>
+					<TldrawUiButtonIcon
+						icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'}
+					/>
+				</TldrawUiButton>
+			</TldrawUiPopoverTrigger>
+			<TldrawUiPopoverContent side="top" align="end">
 				<_StylePanel />
-			</PopoverContent>
-		</Popover>
+			</TldrawUiPopoverContent>
+		</TldrawUiPopover>
 	)
 }
 
@@ -66,5 +73,5 @@ function _StylePanel() {
 	const relevantStyles = useRelevantStyles()
 
 	if (!StylePanel) return null
-	return <StylePanel relevantStyles={relevantStyles} />
+	return <StylePanel relevantStyles={relevantStyles} isMobile />
 }

packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -5,8 +5,9 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useTldrawUiComponents } from '../../context/components'
 import { useLocalStorageState } from '../../hooks/useLocalStorageState'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Button } from '../primitives/Button'
-import { kbdStr } from '../primitives/shared'
+import { kbdStr } from '../../kbd-utils'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 
 /** @public */
 export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
@@ -35,42 +36,46 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 					<>
 						{ZoomMenu && <ZoomMenu />}
 						{Minimap && (
-							<Button
+							<TldrawUiButton
 								type="icon"
-								icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'}
 								data-testid="minimap.toggle"
 								title={msg('navigation-zone.toggle-minimap')}
 								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
-							/>
+							>
+								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
+							</TldrawUiButton>
 						)}
 					</>
 				) : (
 					<>
-						<Button
+						<TldrawUiButton
 							type="icon"
-							icon="minus"
 							data-testid="minimap.zoom-out"
 							title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 							onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
-						/>
+						>
+							<TldrawUiButtonIcon icon="minus" />
+						</TldrawUiButton>
 						{ZoomMenu && <ZoomMenu />}
-						<Button
+						<TldrawUiButton
 							type="icon"
-							icon="plus"
 							data-testid="minimap.zoom-in"
 							title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 							onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
-						/>
+						>
+							<TldrawUiButtonIcon icon="plus" />
+						</TldrawUiButton>
 						{Minimap && (
-							<Button
+							<TldrawUiButton
 								type="icon"
-								icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'}
 								data-testid="minimap.toggle"
 								title={msg('navigation-zone.toggle-minimap')}
 								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
-							/>
+							>
+								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
+							</TldrawUiButton>
 						)}
 					</>
 				)}

packages/tldraw/src/lib/ui/components/OfflineIndicator/OfflineIndicator.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { useRef } from 'react'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Icon } from '../primitives/Icon'
+import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
 
 /** @public */
 export function OfflineIndicator() {
@@ -11,7 +11,7 @@ export function OfflineIndicator() {
 	return (
 		<div className={classNames('tlui-offline-indicator')} ref={rContainer}>
 			{msg('status.offline')}
-			<Icon aria-label="offline" icon="status-offline" small />
+			<TldrawUiIcon aria-label="offline" icon="status-offline" small />
 		</div>
 	)
 }

packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -13,9 +13,15 @@ import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Button } from '../primitives/Button'
-import { Icon } from '../primitives/Icon'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/Popover'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonCheck } from '../primitives/Button/TldrawUiButtonCheck'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
+import {
+	TldrawUiPopover,
+	TldrawUiPopoverContent,
+	TldrawUiPopoverTrigger,
+} from '../primitives/TldrawUiPopover'
 import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 import { onMovePage } from './edit-pages-shared'
@@ -255,33 +261,30 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 	}, [editor, msg, isReadonlyMode])
 
 	return (
-		<Popover id="pages" onOpenChange={onOpenChange} open={isOpen}>
-			<PopoverTrigger
-				className="tlui-page-menu__trigger tlui-menu__trigger"
-				data-testid="main.page-menu"
-				icon="chevron-down"
-				type="menu"
-				title={currentPage.name}
-			>
-				<div className="tlui-page-menu__name">{currentPage.name}</div>
-			</PopoverTrigger>
-			<PopoverContent side="bottom" align="start" sideOffset={6}>
+		<TldrawUiPopover id="pages" onOpenChange={onOpenChange} open={isOpen}>
+			<TldrawUiPopoverTrigger data-testid="main.page-menu">
+				<TldrawUiButton type="menu" title={currentPage.name} className="tlui-page-menu__trigger">
+					<div className="tlui-page-menu__name">{currentPage.name}</div>
+					<TldrawUiButtonIcon icon="chevron-down" small />
+				</TldrawUiButton>
+			</TldrawUiPopoverTrigger>
+			<TldrawUiPopoverContent side="bottom" align="start" sideOffset={6}>
 				<div className="tlui-page-menu__wrapper">
 					<div className="tlui-page-menu__header">
 						<div className="tlui-page-menu__header__title">{msg('page-menu.title')}</div>
 						{!isReadonlyMode && (
 							<div className="tlui-buttons__horizontal">
-								<Button
+								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.edit"
 									title={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}
-									icon={isEditing ? 'check' : 'edit'}
 									onClick={toggleEditing}
-								/>
-								<Button
+								>
+									<TldrawUiButtonIcon icon={isEditing ? 'check' : 'edit'} />
+								</TldrawUiButton>
+								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.create"
-									icon="plus"
 									title={msg(
 										maxPageCountReached
 											? 'page-menu.max-page-count-reached'
@@ -289,7 +292,9 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 									)}
 									disabled={maxPageCountReached}
 									onClick={handleCreatePageClick}
-								/>
+								>
+									<TldrawUiButtonIcon icon="plus" />
+								</TldrawUiButton>
 							</div>
 						)}
 					</div>
@@ -314,24 +319,25 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 										transform: `translate(0px, ${position.y + position.offsetY}px)`,
 									}}
 								>
-									<Button
+									<TldrawUiButton
 										type="icon"
 										tabIndex={-1}
 										className="tlui-page_menu__item__sortable__handle"
-										icon="drag-handle-dots"
 										onPointerDown={handlePointerDown}
 										onPointerUp={handlePointerUp}
 										onPointerMove={handlePointerMove}
 										onKeyDown={handleKeyDown}
 										data-id={page.id}
 										data-index={index}
-									/>
+									>
+										<TldrawUiButtonIcon icon="drag-handle-dots" />
+									</TldrawUiButton>
 									{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer ? (
 										// sigh, this is a workaround for iOS Safari
 										// because the device and the radix popover seem
 										// to be fighting over scroll position. Nothing
 										// else seems to work!
-										<Button
+										<TldrawUiButton
 											type="normal"
 											className="tlui-page-menu__item__button"
 											onClick={() => {
@@ -341,10 +347,10 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 												}
 											}}
 											onDoubleClick={toggleEditing}
-											isChecked={page.id === currentPage.id}
 										>
-											<span>{page.name}</span>
-										</Button>
+											<TldrawUiButtonCheck checked={page.id === currentPage.id} />
+											<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>
+										</TldrawUiButton>
 									) : (
 										<div
 											className="tlui-page_menu__item__sortable__title"
@@ -369,19 +375,16 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 									data-testid={`page-menu-item-${page.id}`}
 									className="tlui-page-menu__item"
 								>
-									<Button
+									<TldrawUiButton
 										type="normal"
-										className="tlui-page-menu__item__button tlui-page-menu__item__button__checkbox"
+										className="tlui-page-menu__item__button"
 										onClick={() => editor.setCurrentPage(page.id)}
 										onDoubleClick={toggleEditing}
-										isChecked={page.id === currentPage.id}
 										title={msg('page-menu.go-to-page')}
 									>
-										<div className="tlui-page-menu__item__button__check">
-											{page.id === currentPage.id && <Icon icon="check" />}
-										</div>
-										<span>{page.name}</span>
-									</Button>
+										<TldrawUiButtonCheck checked={page.id === currentPage.id} />
+										<TldrawUiButtonLabel>{page.name}</TldrawUiButtonLabel>
+									</TldrawUiButton>
 									{!isReadonlyMode && (
 										<div className="tlui-page_menu__item__submenu">
 											<PageItemSubmenu
@@ -409,7 +412,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 						})}
 					</div>
 				</div>
-			</PopoverContent>
-		</Popover>
+			</TldrawUiPopoverContent>
+		</TldrawUiPopover>
 	)
 })

packages/tldraw/src/lib/ui/components/PageMenu/PageItemInput.tsx

@@ -1,6 +1,6 @@
 import { TLPageId, useEditor } from '@tldraw/editor'
 import { useCallback, useRef } from 'react'
-import { Input } from '../primitives/Input'
+import { TldrawUiInput } from '../primitives/TldrawUiInput'
 
 export const PageItemInput = function PageItemInput({
 	name,
@@ -31,7 +31,7 @@ export const PageItemInput = function PageItemInput({
 	)
 
 	return (
-		<Input
+		<TldrawUiInput
 			className="tlui-page-menu__item__input"
 			ref={(el) => (rInput.current = el)}
 			defaultValue={name}

packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx

@@ -1,14 +1,16 @@
 import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@tldraw/editor'
 import { useCallback } from 'react'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
-import { TldrawUiMenuGroup } from '../menus/TldrawUiMenuGroup'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import {
-	DropdownMenuContent,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
+import { TldrawUiMenuGroup } from '../primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 import { onMovePage } from './edit-pages-shared'
 
 export interface PageItemSubmenuProps {
@@ -48,13 +50,13 @@ export const PageItemSubmenu = track(function PageItemSubmenu({
 	}, [editor, item])
 
 	return (
-		<DropdownMenuRoot id={`page item submenu ${index}`}>
-			<DropdownMenuTrigger
-				type="icon"
-				title={msg('page-menu.submenu.title')}
-				icon="dots-vertical"
-			/>
-			<DropdownMenuContent alignOffset={0} side="right" sideOffset={-4}>
+		<TldrawUiDropdownMenuRoot id={`page item submenu ${index}`}>
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton type="icon" title={msg('page-menu.submenu.title')}>
+					<TldrawUiButtonIcon icon="dots-vertical" />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			<TldrawUiDropdownMenuContent alignOffset={0} side="right" sideOffset={-4}>
 				<TldrawUiMenuContextProvider type="menu" sourceId="page-menu">
 					<TldrawUiMenuGroup id="modify">
 						{onRename && (
@@ -87,7 +89,7 @@ export const PageItemSubmenu = track(function PageItemSubmenu({
 						</TldrawUiMenuGroup>
 					)}
 				</TldrawUiMenuContextProvider>
-			</DropdownMenuContent>
-		</DropdownMenuRoot>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
 	)
 })

packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActions.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultQuickActionsContent } from './DefaultQuickActionsContent'
 
 /** @public */

packages/tldraw/src/lib/ui/components/QuickActions/DefaultQuickActionsContent.tsx

@@ -2,7 +2,7 @@ import { useEditor, useValue } from '@tldraw/editor'
 import { useActions } from '../../context/actions'
 import { useCanRedo, useCanUndo, useUnlockedSelectedShapesCount } from '../../hooks/menu-hooks'
 import { useReadonly } from '../../hooks/useReadonly'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 /** @public */
 export function DefaultQuickActionsContent() {

packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx

@@ -33,7 +33,7 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 
 	return (
 		<div
-			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
+			className={classNames('', { 'tlui-style-panel__wrapper': !isMobile })}
 			data-ismobile={isMobile}
 			onPointerLeave={handlePointerOut}
 		>

packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -17,15 +17,16 @@ import {
 	useEditor,
 } from '@tldraw/editor'
 import React from 'react'
+import { STYLES } from '../../../styles'
 import { useUiEvents } from '../../context/events'
 import { useRelevantStyles } from '../../hooks/useRevelantStyles'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Button } from '../primitives/Button'
-import { ButtonPicker } from '../primitives/ButtonPicker'
-import { Slider } from '../primitives/Slider'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiButtonPicker } from '../primitives/TldrawUiButtonPicker'
+import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
 import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
-import { STYLES } from './styles'
 
 /** @public */
 export type TLUiStylePanelContentProps = {
@@ -137,7 +138,7 @@ function CommonStylePickerSet({
 				aria-label="style panel styles"
 			>
 				{color === undefined ? null : (
-					<ButtonPicker
+					<TldrawUiButtonPicker
 						title={msg('style-panel.color')}
 						uiType="color"
 						style={DefaultColorStyle}
@@ -147,7 +148,7 @@ function CommonStylePickerSet({
 					/>
 				)}
 				{opacity === undefined ? null : (
-					<Slider
+					<TldrawUiSlider
 						data-testid="style.opacity"
 						value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
 						label={
@@ -162,7 +163,7 @@ function CommonStylePickerSet({
 			{showPickers && (
 				<div className="tlui-style-panel__section" aria-label="style panel styles">
 					{fill === undefined ? null : (
-						<ButtonPicker
+						<TldrawUiButtonPicker
 							title={msg('style-panel.fill')}
 							uiType="fill"
 							style={DefaultFillStyle}
@@ -172,7 +173,7 @@ function CommonStylePickerSet({
 						/>
 					)}
 					{dash === undefined ? null : (
-						<ButtonPicker
+						<TldrawUiButtonPicker
 							title={msg('style-panel.dash')}
 							uiType="dash"
 							style={DefaultDashStyle}
@@ -182,7 +183,7 @@ function CommonStylePickerSet({
 						/>
 					)}
 					{size === undefined ? null : (
-						<ButtonPicker
+						<TldrawUiButtonPicker
 							title={msg('style-panel.size')}
 							uiType="size"
 							style={DefaultSizeStyle}
@@ -211,7 +212,7 @@ function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 	return (
 		<div className="tlui-style-panel__section" aria-label="style panel text">
 			{font === undefined ? null : (
-				<ButtonPicker
+				<TldrawUiButtonPicker
 					title={msg('style-panel.font')}
 					uiType="font"
 					style={DefaultFontStyle}
@@ -223,7 +224,7 @@ function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 
 			{align === undefined ? null : (
 				<div className="tlui-style-panel__row">
-					<ButtonPicker
+					<TldrawUiButtonPicker
 						title={msg('style-panel.align')}
 						uiType="align"
 						style={DefaultHorizontalAlignStyle}
@@ -233,13 +234,14 @@ function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
 					/>
 					<div className="tlui-style-panel__row__extra-button">
 						{verticalAlign === undefined ? (
-							<Button
+							<TldrawUiButton
 								type="icon"
 								title={msg('style-panel.vertical-align')}
 								data-testid="vertical-align"
-								icon="vertical-align-center"
 								disabled
-							/>
+							>
+								<TldrawUiButtonIcon icon="vertical-align-center" />
+							</TldrawUiButton>
 						) : (
 							<DropdownPicker
 								type="icon"

packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx

@@ -1,15 +1,16 @@
 import { SharedStyle, StyleProp } from '@tldraw/editor'
 import * as React from 'react'
+import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TLUiIconType } from '../../icon-types'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import {
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
-import { StyleValuesForUi } from './styles'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuItem,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
 
 interface DoubleDropdownPickerProps<T extends string> {
 	uiTypeA: string
@@ -63,78 +64,76 @@ export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T e
 				{msg(label)}
 			</div>
 			<div className="tlui-buttons__horizontal">
-				<DropdownMenuRoot id={`style panel ${uiTypeA} A`}>
-					<DropdownMenuTrigger
-						type="icon"
-						data-testid={`style.${uiTypeA}`}
-						title={
-							msg(labelA) +
-							' — ' +
-							(valueA === null || valueA.type === 'mixed'
-								? msg('style-panel.mixed')
-								: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
-						}
-						icon={iconA as any}
-						invertIcon
-						smallIcon
-					/>
-					<DropdownMenuContent side="bottom" align="end" sideOffset={0} alignOffset={-2}>
+				<TldrawUiDropdownMenuRoot id={`style panel ${uiTypeA} A`}>
+					<TldrawUiDropdownMenuTrigger>
+						<TldrawUiButton
+							type="icon"
+							data-testid={`style.${uiTypeA}`}
+							title={
+								msg(labelA) +
+								' — ' +
+								(valueA === null || valueA.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
+							}
+						>
+							<TldrawUiButtonIcon icon={iconA} small invertIcon />
+						</TldrawUiButton>
+					</TldrawUiDropdownMenuTrigger>
+					<TldrawUiDropdownMenuContent side="bottom" align="end" sideOffset={0} alignOffset={-2}>
 						<div className="tlui-buttons__grid">
 							{itemsA.map((item) => {
 								return (
-									<DropdownMenuItem
-										type="icon"
-										title={
-											msg(labelA) +
-											' — ' +
-											msg(`${uiTypeA}-style.${item.value}` as TLUiTranslationKey)
-										}
-										data-testid={`style.${uiTypeA}.${item.value}`}
-										key={item.value}
-										icon={item.icon as TLUiIconType}
-										onClick={() => onValueChange(styleA, item.value, false)}
-										invertIcon
-									/>
+									<TldrawUiDropdownMenuItem data-testid={`style.${uiTypeA}.${item.value}`}>
+										<TldrawUiButton
+											type="icon"
+											key={item.value}
+											onClick={() => onValueChange(styleA, item.value, false)}
+											title={`${msg(labelA)} — ${msg(`${uiTypeA}-style.${item.value}`)}`}
+										>
+											<TldrawUiButtonIcon icon={item.icon} invertIcon />
+										</TldrawUiButton>
+									</TldrawUiDropdownMenuItem>
 								)
 							})}
 						</div>
-					</DropdownMenuContent>
-				</DropdownMenuRoot>
-				<DropdownMenuRoot id={`style panel ${uiTypeB}`}>
-					<DropdownMenuTrigger
-						type="icon"
-						data-testid={`style.${uiTypeB}`}
-						title={
-							msg(labelB) +
-							' — ' +
-							(valueB === null || valueB.type === 'mixed'
-								? msg('style-panel.mixed')
-								: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
-						}
-						icon={iconB as any}
-						smallIcon
-					/>
-					<DropdownMenuContent side="bottom" align="end" sideOffset={0} alignOffset={-2}>
+					</TldrawUiDropdownMenuContent>
+				</TldrawUiDropdownMenuRoot>
+				<TldrawUiDropdownMenuRoot id={`style panel ${uiTypeB}`}>
+					<TldrawUiDropdownMenuTrigger>
+						<TldrawUiButton
+							type="icon"
+							data-testid={`style.${uiTypeB}`}
+							title={
+								msg(labelB) +
+								' — ' +
+								(valueB === null || valueB.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
+							}
+						>
+							<TldrawUiButtonIcon icon={iconB} small />
+						</TldrawUiButton>
+					</TldrawUiDropdownMenuTrigger>
+					<TldrawUiDropdownMenuContent side="bottom" align="end" sideOffset={0} alignOffset={-2}>
 						<div className="tlui-buttons__grid">
 							{itemsB.map((item) => {
 								return (
-									<DropdownMenuItem
-										type="icon"
-										title={
-											msg(labelB) +
-											' — ' +
-											msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)
-										}
-										data-testid={`style.${uiTypeB}.${item.value}`}
-										key={item.value}
-										icon={item.icon as TLUiIconType}
-										onClick={() => onValueChange(styleB, item.value, false)}
-									/>
+									<TldrawUiDropdownMenuItem key={item.value}>
+										<TldrawUiButton
+											type="icon"
+											title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
+											data-testid={`style.${uiTypeB}.${item.value}`}
+											onClick={() => onValueChange(styleB, item.value, false)}
+										>
+											<TldrawUiButtonIcon icon={item.icon} />
+										</TldrawUiButton>
+									</TldrawUiDropdownMenuItem>
 								)
 							})}
 						</div>
-					</DropdownMenuContent>
-				</DropdownMenuRoot>
+					</TldrawUiDropdownMenuContent>
+				</TldrawUiDropdownMenuRoot>
 			</div>
 		</div>
 	)

packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx

@@ -1,16 +1,18 @@
 import { SharedStyle, StyleProp } from '@tldraw/editor'
 import * as React from 'react'
+import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../../icon-types'
-import { TLUiButtonProps } from '../primitives/Button'
+import { TLUiButtonProps, TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
 import {
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
-import { StyleValuesForUi } from './styles'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuItem,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
 
 interface DropdownPickerProps<T extends string> {
 	id: string
@@ -40,35 +42,38 @@ export const DropdownPicker = React.memo(function DropdownPicker<T extends strin
 		[items, value]
 	)
 
+	const titleStr =
+		value.type === 'mixed'
+			? msg('style-panel.mixed')
+			: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)
+	const labelStr = label ? msg(label) : ''
+
 	return (
-		<DropdownMenuRoot id={`style panel ${id}`}>
-			<DropdownMenuTrigger
-				type={type}
-				data-testid={`style.${uiType}`}
-				title={
-					value.type === 'mixed'
-						? msg('style-panel.mixed')
-						: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)
-				}
-				label={label}
-				icon={(icon as TLUiIconType) ?? 'mixed'}
-			/>
-			<DropdownMenuContent side="left" align="center" alignOffset={0}>
+		<TldrawUiDropdownMenuRoot id={`style panel ${id}`}>
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton type={type} data-testid={`style.${uiType}`} title={titleStr}>
+					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+					<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			<TldrawUiDropdownMenuContent side="left" align="center" alignOffset={0}>
 				<div className="tlui-buttons__grid">
 					{items.map((item) => {
 						return (
-							<DropdownMenuItem
-								type="icon"
-								data-testid={`style.${uiType}.${item.value}`}
-								title={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}
-								key={item.value}
-								icon={item.icon as TLUiIconType}
-								onClick={() => onValueChange(style, item.value, false)}
-							/>
+							<TldrawUiDropdownMenuItem key={item.value}>
+								<TldrawUiButton
+									type="icon"
+									data-testid={`style.${uiType}.${item.value}`}
+									title={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}
+									onClick={() => onValueChange(style, item.value, false)}
+								>
+									<TldrawUiButtonIcon icon={item.icon} />
+								</TldrawUiButton>
+							</TldrawUiDropdownMenuItem>
 						)
 					})}
 				</div>
-			</DropdownMenuContent>
-		</DropdownMenuRoot>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
 	)
 })

packages/tldraw/src/lib/ui/components/Toasts.tsx

@@ -3,8 +3,9 @@ import * as React from 'react'
 import { TLUiToast, useToasts } from '../context/toasts'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../icon-types'
-import { Button } from './primitives/Button'
-import { Icon } from './primitives/Icon'
+import { TldrawUiButton } from './primitives/Button/TldrawUiButton'
+import { TldrawUiButtonLabel } from './primitives/Button/TldrawUiButtonLabel'
+import { TldrawUiIcon } from './primitives/TldrawUiIcon'
 
 function Toast({ toast }: { toast: TLUiToast }) {
 	const { removeToast } = useToasts()
@@ -26,7 +27,7 @@ function Toast({ toast }: { toast: TLUiToast }) {
 		>
 			{toast.icon && (
 				<div className="tlui-toast__icon">
-					<Icon icon={toast.icon as TLUiIconType} />
+					<TldrawUiIcon icon={toast.icon as TLUiIconType} />
 				</div>
 			)}
 			<div className="tlui-toast__main">
@@ -40,22 +41,28 @@ function Toast({ toast }: { toast: TLUiToast }) {
 					<div className="tlui-toast__actions">
 						{toast.actions.map((action, i) => (
 							<T.Action key={i} altText={action.label} asChild onClick={action.onClick}>
-								<Button type={action.type}>{action.label}</Button>
+								<TldrawUiButton type={action.type}>
+									<TldrawUiButtonLabel>{action.label}</TldrawUiButtonLabel>
+								</TldrawUiButton>
 							</T.Action>
 						))}
 						<T.Close asChild>
-							<Button type="normal" className="tlui-toast__close" style={{ marginLeft: 'auto' }}>
-								{toast.closeLabel ?? msg('toast.close')}
-							</Button>
+							<TldrawUiButton
+								type="normal"
+								className="tlui-toast__close"
+								style={{ marginLeft: 'auto' }}
+							>
+								<TldrawUiButtonLabel>{toast.closeLabel ?? msg('toast.close')}</TldrawUiButtonLabel>
+							</TldrawUiButton>
 						</T.Close>
 					</div>
 				)}
 			</div>
 			{!hasActions && (
 				<T.Close asChild>
-					<Button type="normal" className="tlui-toast__close">
-						{toast.closeLabel ?? msg('toast.close')}
-					</Button>
+					<TldrawUiButton type="normal" className="tlui-toast__close">
+						<TldrawUiButtonLabel>{toast.closeLabel ?? msg('toast.close')}</TldrawUiButtonLabel>
+					</TldrawUiButton>
 				</T.Close>
 			)}
 		</T.Root>

packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx

@@ -10,15 +10,16 @@ import { useReadonly } from '../../hooks/useReadonly'
 import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'
 import { TLUiToolItem } from '../../hooks/useTools'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { kbdStr } from '../../kbd-utils'
 import { MobileStylePanel } from '../MobileStylePanel'
-import { Button } from '../primitives/Button'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import {
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuRoot,
-	DropdownMenuTrigger,
-} from '../primitives/DropdownMenu'
-import { kbdStr } from '../primitives/shared'
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuItem,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+} from '../primitives/TldrawUiDropdownMenu'
 import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 
 /** @public */
@@ -143,18 +144,21 @@ export const DefaultToolbar = memo(function DefaultToolbar() {
 									)}
 								/>
 								{/* The dropdown to select everything else */}
-								<DropdownMenuRoot id="toolbar overflow" modal={false}>
-									<DropdownMenuTrigger
-										className="tlui-toolbar__overflow"
-										icon="chevron-up"
-										type="tool"
-										data-testid="tools.more"
-										title={msg('tool-panel.more')}
-									/>
-									<DropdownMenuContent side="top" align="center">
+								<TldrawUiDropdownMenuRoot id="toolbar overflow" modal={false}>
+									<TldrawUiDropdownMenuTrigger>
+										<TldrawUiButton
+											title={msg('tool-panel.more')}
+											type="tool"
+											className="tlui-toolbar__overflow"
+											data-testid="tools.more"
+										>
+											<TldrawUiButtonIcon icon="chevron-up" />
+										</TldrawUiButton>
+									</TldrawUiDropdownMenuTrigger>
+									<TldrawUiDropdownMenuContent side="top" align="center">
 										<OverflowToolsContent toolbarItems={itemsInDropdown} />
-									</DropdownMenuContent>
-								</DropdownMenuRoot>
+									</TldrawUiDropdownMenuContent>
+								</TldrawUiDropdownMenuRoot>
 							</>
 						) : null}
 					</div>
@@ -180,18 +184,22 @@ const OverflowToolsContent = track(function OverflowToolsContent({
 		<div className="tlui-buttons__grid">
 			{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {
 				return (
-					<DropdownMenuItem
+					<TldrawUiDropdownMenuItem
 						key={id}
-						type="icon"
-						className="tlui-button-grid__button"
-						data-testid={`tools.more.${id}`}
 						data-tool={id}
 						data-geo={meta?.geo ?? ''}
 						aria-label={label}
-						onClick={() => onSelect('toolbar')}
-						title={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}
-						icon={icon}
-					/>
+					>
+						<TldrawUiButton
+							type="icon"
+							className="tlui-button-grid__button"
+							onClick={() => onSelect('toolbar')}
+							data-testid={`tools.more.${id}`}
+							title={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}
+						>
+							<TldrawUiButtonIcon icon={icon} />
+						</TldrawUiButton>
+					</TldrawUiDropdownMenuItem>
 				)
 			})}
 		</div>
@@ -208,21 +216,22 @@ function ToolbarButton({
 	isSelected: boolean
 }) {
 	return (
-		<Button
+		<TldrawUiButton
 			type="tool"
 			data-testid={`tools.${item.id}`}
 			data-tool={item.id}
 			data-geo={item.meta?.geo ?? ''}
 			aria-label={item.label}
-			title={title}
-			icon={item.icon}
 			data-state={isSelected ? 'selected' : undefined}
 			onClick={() => item.onSelect('toolbar')}
+			title={title}
 			onTouchStart={(e) => {
 				preventDefault(e)
 				item.onSelect('toolbar')
 			}}
-		/>
+		>
+			<TldrawUiButtonIcon icon={item.icon} />
+		</TldrawUiButton>
 	)
 }
 

packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Button } from '../primitives/Button'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 
 interface ToggleToolLockedButtonProps {
 	activeToolId?: string
@@ -32,15 +33,15 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 	if (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId)) return null
 
 	return (
-		<Button
+		<TldrawUiButton
 			type="normal"
 			title={msg('action.toggle-tool-lock')}
 			className={classNames('tlui-toolbar__lock-button', {
 				'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 			})}
-			icon={isToolLocked ? 'lock' : 'unlock'}
 			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
-			smallIcon
-		/>
+		>
+			<TldrawUiButtonIcon icon={isToolLocked ? 'lock' : 'unlock'} small />
+		</TldrawUiButton>
 	)
 }

packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -5,8 +5,8 @@ import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiMenuContextProvider } from '../menus/TldrawUiMenuContext'
-import { Button } from '../primitives/Button'
+import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
+import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultZoomMenuContent } from './DefaultZoomMenuContent'
 
 /** @public */
@@ -59,7 +59,7 @@ const ZoomTriggerButton = forwardRef<HTMLButtonElement, any>(
 		}, [editor])
 
 		return (
-			<Button
+			<TldrawUiButton
 				ref={ref}
 				{...props}
 				type="icon"
@@ -76,7 +76,7 @@ const ZoomTriggerButton = forwardRef<HTMLButtonElement, any>(
 				{breakpoint < PORTRAIT_BREAKPOINT.MOBILE ? null : (
 					<span style={{ flexGrow: 0, textAlign: 'center' }}>{Math.floor(zoom * 100)}%</span>
 				)}
-			</Button>
+			</TldrawUiButton>
 		)
 	}
 )

packages/tldraw/src/lib/ui/components/ZoomMenu/DefaultZoomMenuContent.tsx

@@ -1,6 +1,6 @@
 import { useActions } from '../../context/actions'
 import { ZoomTo100MenuItem, ZoomToFitMenuItem, ZoomToSelectionMenuItem } from '../menu-items'
-import { TldrawUiMenuItem } from '../menus/TldrawUiMenuItem'
+import { TldrawUiMenuItem } from '../primitives/menus/TldrawUiMenuItem'
 
 /** @public */
 export function DefaultZoomMenuContent() {

packages/tldraw/src/lib/ui/components/menu-items.tsx

@@ -21,10 +21,10 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../hooks/menu-hooks'
-import { TldrawUiMenuCheckboxItem } from './menus/TldrawUiMenuCheckboxItem'
-import { TldrawUiMenuGroup } from './menus/TldrawUiMenuGroup'
-import { TldrawUiMenuItem } from './menus/TldrawUiMenuItem'
-import { TldrawUiMenuSubmenu } from './menus/TldrawUiMenuSubmenu'
+import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
 
 /* -------------------- Selection ------------------- */
 

packages/tldraw/src/lib/ui/components/primitives/Button.tsx

@@ -1,80 +0,0 @@
-import { useEditor } from '@tldraw/editor'
-import classnames from 'classnames'
-import * as React from 'react'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TLUiIconType } from '../../icon-types'
-import { Spinner } from '../Spinner'
-import { Icon } from './Icon'
-import { Kbd } from './Kbd'
-
-/** @public */
-export interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-	loading?: boolean // TODO: loading spinner
-	disabled?: boolean
-	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
-	icon?: TLUiIconType | Exclude<string, TLUiIconType>
-	spinner?: boolean
-	iconLeft?: TLUiIconType | Exclude<string, TLUiIconType>
-	smallIcon?: boolean
-	kbd?: string
-	isChecked?: boolean
-	invertIcon?: boolean
-	type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'
-}
-
-/** @public */
-export const Button = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(function Button(
-	{
-		label,
-		icon,
-		invertIcon,
-		iconLeft,
-		smallIcon,
-		kbd,
-		isChecked = false,
-		type,
-		children,
-		spinner,
-		disabled,
-		...props
-	},
-	ref
-) {
-	const msg = useTranslation()
-	const labelStr = label ? msg(label) : ''
-	const editor = useEditor()
-
-	// If the button is getting disabled while it's focused, move focus to the editor
-	// so that the user can continue using keyboard shortcuts
-	const current = (ref as React.MutableRefObject<HTMLButtonElement | null>)?.current
-	if (disabled && current === document.activeElement) {
-		editor.getContainer().focus()
-	}
-
-	return (
-		<button
-			ref={ref}
-			draggable={false}
-			type="button"
-			disabled={disabled}
-			{...props}
-			title={props.title ?? labelStr}
-			className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
-		>
-			{iconLeft && <Icon icon={iconLeft} className="tlui-button__icon-left" small />}
-			{children}
-			{label && (
-				<span className="tlui-button__label" draggable={false}>
-					{labelStr}
-					{isChecked && <Icon icon="check" />}
-				</span>
-			)}
-			{kbd && <Kbd>{kbd}</Kbd>}
-			{icon && !spinner && (
-				<Icon icon={icon} small={!!label || smallIcon} invertIcon={invertIcon} />
-			)}
-			{spinner && <Spinner />}
-		</button>
-	)
-})

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButton.tsx

@@ -0,0 +1,36 @@
+import { useEditor } from '@tldraw/editor'
+import classnames from 'classnames'
+import * as React from 'react'
+
+/** @public */
+export interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+	disabled?: boolean
+	type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'
+}
+
+/** @public */
+export const TldrawUiButton = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(
+	function TldrawUiButton({ children, disabled, type, ...props }, ref) {
+		const editor = useEditor()
+
+		// If the button is getting disabled while it's focused, move focus to the editor
+		// so that the user can continue using keyboard shortcuts
+		const current = (ref as React.MutableRefObject<HTMLButtonElement | null>)?.current
+		if (disabled && current === document.activeElement) {
+			editor.getContainer().focus()
+		}
+
+		return (
+			<button
+				ref={ref}
+				type="button"
+				draggable={false}
+				disabled={disabled}
+				{...props}
+				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
+			>
+				{children}
+			</button>
+		)
+	}
+)

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonCheck.tsx

@@ -0,0 +1,11 @@
+import { TldrawUiIcon } from '../TldrawUiIcon'
+
+/** @public */
+export type TLUiButtonCheckProps = { checked: boolean }
+
+/** @public */
+export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps) {
+	return (
+		<TldrawUiIcon icon={checked ? 'check' : 'checkbox-empty'} className="tlui-button__icon" small />
+	)
+}

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -0,0 +1,15 @@
+import { TldrawUiIcon } from '../TldrawUiIcon'
+
+/** @public */
+export type TLUiButtonIconProps = {
+	icon: string
+	small?: boolean
+	invertIcon?: boolean
+}
+
+/** @public */
+export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps) {
+	return (
+		<TldrawUiIcon className="tlui-button__icon" icon={icon} small={small} invertIcon={invertIcon} />
+	)
+}

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonLabel.tsx

@@ -0,0 +1,7 @@
+/** @public */
+export type TLUiButtonLabelProps = { children?: any }
+
+/** @public */
+export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps) {
+	return <span className="tlui-button__label">{children}</span>
+}

packages/tldraw/src/lib/ui/components/primitives/Button/TldrawUiButtonSpinner.tsx

@@ -0,0 +1,6 @@
+import { Spinner } from '../../Spinner'
+
+/** @public */
+export function TldrawUiButtonSpinner() {
+	return <Spinner />
+}

packages/tldraw/src/lib/ui/components/primitives/Input.tsx

@@ -1,165 +0,0 @@
-import { stopEventPropagation, useEditor } from '@tldraw/editor'
-import classNames from 'classnames'
-import * as React from 'react'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TLUiIconType } from '../../icon-types'
-import { Icon } from './Icon'
-
-/** @public */
-export interface TLUiInputProps {
-	disabled?: boolean
-	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
-	icon?: TLUiIconType | Exclude<string, TLUiIconType>
-	iconLeft?: TLUiIconType | Exclude<string, TLUiIconType>
-	autofocus?: boolean
-	autoselect?: boolean
-	children?: any
-	defaultValue?: string
-	placeholder?: string
-	onComplete?: (value: string) => void
-	onValueChange?: (value: string) => void
-	onCancel?: (value: string) => void
-	onBlur?: (value: string) => void
-	className?: string
-	/**
-	 * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input
-	 * into view. Sometimes this doesn't work properly though - for example, if the input is newly
-	 * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to
-	 * opt-in to some extra code to manually bring the input into view when the visual viewport of the
-	 * browser changes, but we don't want to use it everywhere because generally the native behavior
-	 * looks nicer in scenarios where it's sufficient.
-	 */
-	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
-	value?: string
-}
-
-/** @public */
-export const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function Input(
-	{
-		className,
-		label,
-		icon,
-		iconLeft,
-		autoselect = false,
-		autofocus = false,
-		defaultValue,
-		placeholder,
-		onComplete,
-		onValueChange,
-		onCancel,
-		onBlur,
-		shouldManuallyMaintainScrollPositionWhenFocused = false,
-		children,
-		value,
-	},
-	ref
-) {
-	const editor = useEditor()
-	const rInputRef = React.useRef<HTMLInputElement>(null)
-
-	// combine rInputRef and ref
-	React.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)
-
-	const msg = useTranslation()
-	const rInitialValue = React.useRef<string>(defaultValue ?? '')
-	const rCurrentValue = React.useRef<string>(defaultValue ?? '')
-
-	const [isFocused, setIsFocused] = React.useState(false)
-	const handleFocus = React.useCallback(
-		(e: React.FocusEvent<HTMLInputElement>) => {
-			setIsFocused(true)
-			const elm = e.currentTarget as HTMLInputElement
-			rCurrentValue.current = elm.value
-			requestAnimationFrame(() => {
-				if (autoselect) {
-					elm.select()
-				}
-			})
-		},
-		[autoselect]
-	)
-
-	const handleChange = React.useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => {
-			const value = e.currentTarget.value
-			rCurrentValue.current = value
-			onValueChange?.(value)
-		},
-		[onValueChange]
-	)
-
-	const handleKeyUp = React.useCallback(
-		(e: React.KeyboardEvent<HTMLInputElement>) => {
-			switch (e.key) {
-				case 'Enter': {
-					e.currentTarget.blur()
-					stopEventPropagation(e)
-					onComplete?.(e.currentTarget.value)
-					break
-				}
-				case 'Escape': {
-					e.currentTarget.value = rInitialValue.current
-					e.currentTarget.blur()
-					stopEventPropagation(e)
-					onCancel?.(e.currentTarget.value)
-					break
-				}
-			}
-		},
-		[onComplete, onCancel]
-	)
-
-	const handleBlur = React.useCallback(
-		(e: React.FocusEvent<HTMLInputElement>) => {
-			setIsFocused(false)
-			const value = e.currentTarget.value
-			onBlur?.(value)
-		},
-		[onBlur]
-	)
-
-	React.useEffect(() => {
-		if (!editor.environment.isIos) return
-
-		const visualViewport = window.visualViewport
-		if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {
-			const onViewportChange = () => {
-				rInputRef.current?.scrollIntoView({ block: 'center' })
-			}
-			visualViewport.addEventListener('resize', onViewportChange)
-			visualViewport.addEventListener('scroll', onViewportChange)
-
-			requestAnimationFrame(() => {
-				rInputRef.current?.scrollIntoView({ block: 'center' })
-			})
-
-			return () => {
-				visualViewport.removeEventListener('resize', onViewportChange)
-				visualViewport.removeEventListener('scroll', onViewportChange)
-			}
-		}
-	}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])
-
-	return (
-		<div draggable={false} className="tlui-input__wrapper">
-			{children}
-			{label && <label>{msg(label)}</label>}
-			{iconLeft && <Icon icon={iconLeft} className="tlui-icon-left" small />}
-			<input
-				ref={rInputRef}
-				className={classNames('tlui-input', className)}
-				type="text"
-				defaultValue={defaultValue}
-				onKeyUp={handleKeyUp}
-				onChange={handleChange}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				autoFocus={autofocus}
-				placeholder={placeholder}
-				value={value}
-			/>
-			{icon && <Icon icon={icon} small={!!label} />}
-		</div>
-	)
-})

packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx

@@ -8,16 +8,15 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import classNames from 'classnames'
-import * as React from 'react'
-import { useRef } from 'react'
+import { memo, useMemo, useRef } from 'react'
+import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TLUiIconType } from '../../icon-types'
-import { StyleValuesForUi } from '../StylePanel/styles'
-import { Button } from './Button'
+import { TldrawUiButton } from './Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 
-/** @internal */
-export interface ButtonPickerProps<T extends string> {
+/** @public */
+export interface TLUiButtonPickerProps<T extends string> {
 	title: string
 	uiType: string
 	style: StyleProp<T>
@@ -26,7 +25,10 @@ export interface ButtonPickerProps<T extends string> {
 	onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void
 }
 
-function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
+/** @public */
+export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(
+	props: TLUiButtonPickerProps<T>
+) {
 	const {
 		uiType,
 		items,
@@ -46,7 +48,7 @@ function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
 		handleButtonPointerDown,
 		handleButtonPointerEnter,
 		handleButtonPointerUp,
-	} = React.useMemo(() => {
+	} = useMemo(() => {
 		const handlePointerUp = () => {
 			rPointing.current = false
 			window.removeEventListener('pointerup', handlePointerUp)
@@ -99,7 +101,7 @@ function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
 	return (
 		<div className={classNames('tlui-buttons__grid')}>
 			{items.map((item) => (
-				<Button
+				<TldrawUiButton
 					type="icon"
 					key={item.value}
 					data-id={item.value}
@@ -117,12 +119,10 @@ function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
 					onPointerDown={handleButtonPointerDown}
 					onPointerUp={handleButtonPointerUp}
 					onClick={handleButtonClick}
-					icon={item.icon as TLUiIconType}
-				/>
+				>
+					<TldrawUiButtonIcon icon={item.icon} />
+				</TldrawUiButton>
 			))}
 		</div>
 	)
-}
-
-/** @internal */
-export const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker
+})

packages/tldraw/src/lib/ui/components/primitives/TldrawUiDialog.tsx

@@ -1,7 +1,7 @@
 import * as _Dialog from '@radix-ui/react-dialog'
 import classNames from 'classnames'
-import { Button } from './Button'
-import { Icon } from './Icon'
+import { TldrawUiButton } from './Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 
 /** @public */
 export type TLUiDialogHeaderProps = {
@@ -10,7 +10,7 @@ export type TLUiDialogHeaderProps = {
 }
 
 /** @public */
-export function DialogHeader({ className, children }: TLUiDialogHeaderProps) {
+export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps) {
 	return <div className={classNames('tlui-dialog__header', className)}>{children}</div>
 }
 
@@ -21,7 +21,7 @@ export type TLUiDialogTitleProps = {
 }
 
 /** @public */
-export function DialogTitle({ className, children }: TLUiDialogTitleProps) {
+export function TldrawUiDialogTitle({ className, children }: TLUiDialogTitleProps) {
 	return (
 		<_Dialog.DialogTitle dir="ltr" className={classNames('tlui-dialog__header__title', className)}>
 			{children}
@@ -30,17 +30,17 @@ export function DialogTitle({ className, children }: TLUiDialogTitleProps) {
 }
 
 /** @public */
-export function DialogCloseButton() {
+export function TldrawUiDialogCloseButton() {
 	return (
 		<div className="tlui-dialog__header__close">
 			<_Dialog.DialogClose data-testid="dialog.close" dir="ltr" asChild>
-				<Button
+				<TldrawUiButton
 					type="icon"
 					aria-label="Close"
 					onTouchEnd={(e) => (e.target as HTMLButtonElement).click()}
 				>
-					<Icon small icon="cross-2" />
-				</Button>
+					<TldrawUiButtonIcon small icon="cross-2" />
+				</TldrawUiButton>
 			</_Dialog.DialogClose>
 		</div>
 	)
@@ -54,7 +54,7 @@ export type TLUiDialogBodyProps = {
 }
 
 /** @public */
-export function DialogBody({ className, children, style }: TLUiDialogBodyProps) {
+export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
 		<div className={classNames('tlui-dialog__body', className)} style={style}>
 			{children}
@@ -69,6 +69,6 @@ export type TLUiDialogFooterProps = {
 }
 
 /** @public */
-export function DialogFooter({ className, children }: TLUiDialogFooterProps) {
+export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps) {
 	return <div className={classNames('tlui-dialog__footer', className)}>{children}</div>
 }

packages/tldraw/src/lib/ui/components/primitives/TldrawUiDropdownMenu.tsx

@@ -1,8 +1,10 @@
 import * as _DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { preventDefault, useContainer } from '@tldraw/editor'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
-import { Button, TLUiButtonProps } from './Button'
-import { Icon } from './Icon'
+import { TldrawUiButton } from './Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from './Button/TldrawUiButtonLabel'
+import { TldrawUiIcon } from './TldrawUiIcon'
 
 /** @public */
 export type TLUiDropdownMenuRootProps = {
@@ -13,7 +15,7 @@ export type TLUiDropdownMenuRootProps = {
 }
 
 /** @public */
-export function DropdownMenuRoot({
+export function TldrawUiDropdownMenuRoot({
 	id,
 	children,
 	modal = false,
@@ -34,20 +36,21 @@ export function DropdownMenuRoot({
 }
 
 /** @public */
-export interface TLUiDropdownMenuTriggerProps extends TLUiButtonProps {
+export interface TLUiDropdownMenuTriggerProps {
 	children?: any
 }
 
 /** @public */
-export function DropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps) {
+export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps) {
 	return (
 		<_DropdownMenu.Trigger
 			dir="ltr"
 			asChild
 			// Firefox fix: Stop the dropdown immediately closing after touch
 			onTouchEnd={(e) => preventDefault(e)}
+			{...rest}
 		>
-			<Button {...rest}>{children}</Button>
+			{children}
 		</_DropdownMenu.Trigger>
 	)
 }
@@ -63,7 +66,7 @@ export type TLUiDropdownMenuContentProps = {
 }
 
 /** @public */
-export function DropdownMenuContent({
+export function TldrawUiDropdownMenuContent({
 	side = 'bottom',
 	align = 'start',
 	sideOffset = 8,
@@ -92,7 +95,7 @@ export function DropdownMenuContent({
 export type TLUiDropdownMenuSubProps = { id: string; children: any }
 
 /** @public */
-export function DropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) {
+export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps) {
 	const [open, onOpenChange] = useMenuIsOpen(id)
 
 	return (
@@ -111,21 +114,22 @@ export type TLUiDropdownMenuSubTriggerProps = {
 }
 
 /** @public */
-export function DropdownMenuSubTrigger({
+export function TldrawUiDropdownMenuSubTrigger({
 	label,
 	title,
 	disabled,
 }: TLUiDropdownMenuSubTriggerProps) {
 	return (
 		<_DropdownMenu.SubTrigger dir="ltr" asChild>
-			<Button
+			<TldrawUiButton
 				type="menu"
 				className="tlui-menu__submenu__trigger"
 				disabled={disabled}
 				title={title}
-				label={label}
-				icon="chevron-right"
-			/>
+			>
+				<TldrawUiButtonLabel>{label}</TldrawUiButtonLabel>
+				<TldrawUiButtonIcon icon="chevron-right" small />
+			</TldrawUiButton>
 		</_DropdownMenu.SubTrigger>
 	)
 }
@@ -139,7 +143,7 @@ export type TLUiDropdownMenuSubContentProps = {
 }
 
 /** @public */
-export function DropdownMenuSubContent({
+export function TldrawUiDropdownMenuSubContent({
 	alignOffset = -1,
 	sideOffset = -4,
 	children,
@@ -166,7 +170,10 @@ export type TLUiDropdownMenuGroupProps = {
 }
 
 /** @public */
-export function DropdownMenuGroup({ children, size = 'medium' }: TLUiDropdownMenuGroupProps) {
+export function TldrawUiDropdownMenuGroup({
+	children,
+	size = 'medium',
+}: TLUiDropdownMenuGroupProps) {
 	return (
 		<_DropdownMenu.Group dir="ltr" className="tlui-menu__group" data-size={size}>
 			{children}
@@ -175,28 +182,25 @@ export function DropdownMenuGroup({ children, size = 'medium' }: TLUiDropdownMen
 }
 
 /** @public */
-export function DropdownMenuIndicator() {
+export function TldrawUiDropdownMenuIndicator() {
 	return (
 		<_DropdownMenu.ItemIndicator dir="ltr" asChild>
-			<Icon icon="check" />
+			<TldrawUiIcon icon="check" />
 		</_DropdownMenu.ItemIndicator>
 	)
 }
 
 /** @public */
-export interface TLUiDropdownMenuItemProps extends TLUiButtonProps {
+export interface TLUiDropdownMenuItemProps {
 	noClose?: boolean
+	children: any
 }
 
 /** @public */
-export function DropdownMenuItem({ noClose, ...props }: TLUiDropdownMenuItemProps) {
+export function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps) {
 	return (
-		<_DropdownMenu.Item
-			dir="ltr"
-			asChild
-			onClick={noClose || props.isChecked !== undefined ? preventDefault : undefined}
-		>
-			<Button {...props} />
+		<_DropdownMenu.Item dir="ltr" asChild onClick={noClose ? preventDefault : undefined}>
+			{children}
 		</_DropdownMenu.Item>
 	)
 }
@@ -211,7 +215,7 @@ export interface TLUiDropdownMenuCheckboxItemProps {
 }
 
 /** @public */
-export function DropdownMenuCheckboxItem({
+export function TldrawUiDropdownMenuCheckboxItem({
 	children,
 	onSelect,
 	...rest
@@ -228,38 +232,7 @@ export function DropdownMenuCheckboxItem({
 		>
 			<div className="tlui-button__checkbox__indicator">
 				<_DropdownMenu.ItemIndicator dir="ltr">
-					<Icon icon="check" small />
-				</_DropdownMenu.ItemIndicator>
-			</div>
-			{children}
-		</_DropdownMenu.CheckboxItem>
-	)
-}
-
-/** @public */
-export interface TLUiDropdownMenuRadioItemProps {
-	checked?: boolean
-	onSelect?: (e: Event) => void
-	disabled?: boolean
-	title: string
-	children: any
-}
-
-/** @public */
-export function DropdownMenuRadioItem({ children, ...rest }: TLUiDropdownMenuRadioItemProps) {
-	return (
-		<_DropdownMenu.CheckboxItem
-			dir="ltr"
-			className="tlui-button tlui-button__menu tlui-button__checkbox"
-			{...rest}
-			onSelect={(e) => {
-				preventDefault(e)
-				rest.onSelect?.(e)
-			}}
-		>
-			<div className="tlui-button__checkbox__indicator">
-				<_DropdownMenu.ItemIndicator dir="ltr">
-					<Icon icon="check" small />
+					<TldrawUiIcon icon="check" small />
 				</_DropdownMenu.ItemIndicator>
 			</div>
 			{children}

packages/tldraw/src/lib/ui/components/primitives/TldrawUiIcon.tsx

@@ -14,7 +14,7 @@ export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 /** @public */
-export const Icon = memo(function Icon({
+export const TldrawUiIcon = memo(function TldrawUi({
 	small,
 	invertIcon,
 	icon,

packages/tldraw/src/lib/ui/components/primitives/TldrawUiInput.tsx

@@ -0,0 +1,167 @@
+import { stopEventPropagation, useEditor } from '@tldraw/editor'
+import classNames from 'classnames'
+import * as React from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { TldrawUiIcon } from './TldrawUiIcon'
+
+/** @public */
+export interface TLUiInputProps {
+	disabled?: boolean
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	icon?: TLUiIconType | Exclude<string, TLUiIconType>
+	iconLeft?: TLUiIconType | Exclude<string, TLUiIconType>
+	autofocus?: boolean
+	autoselect?: boolean
+	children?: any
+	defaultValue?: string
+	placeholder?: string
+	onComplete?: (value: string) => void
+	onValueChange?: (value: string) => void
+	onCancel?: (value: string) => void
+	onBlur?: (value: string) => void
+	className?: string
+	/**
+	 * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input
+	 * into view. Sometimes this doesn't work properly though - for example, if the input is newly
+	 * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to
+	 * opt-in to some extra code to manually bring the input into view when the visual viewport of the
+	 * browser changes, but we don't want to use it everywhere because generally the native behavior
+	 * looks nicer in scenarios where it's sufficient.
+	 */
+	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
+	value?: string
+}
+
+/** @public */
+export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
+	function TldrawUiInput(
+		{
+			className,
+			label,
+			icon,
+			iconLeft,
+			autoselect = false,
+			autofocus = false,
+			defaultValue,
+			placeholder,
+			onComplete,
+			onValueChange,
+			onCancel,
+			onBlur,
+			shouldManuallyMaintainScrollPositionWhenFocused = false,
+			children,
+			value,
+		},
+		ref
+	) {
+		const editor = useEditor()
+		const rInputRef = React.useRef<HTMLInputElement>(null)
+
+		// combine rInputRef and ref
+		React.useImperativeHandle(ref, () => rInputRef.current as HTMLInputElement)
+
+		const msg = useTranslation()
+		const rInitialValue = React.useRef<string>(defaultValue ?? '')
+		const rCurrentValue = React.useRef<string>(defaultValue ?? '')
+
+		const [isFocused, setIsFocused] = React.useState(false)
+		const handleFocus = React.useCallback(
+			(e: React.FocusEvent<HTMLInputElement>) => {
+				setIsFocused(true)
+				const elm = e.currentTarget as HTMLInputElement
+				rCurrentValue.current = elm.value
+				requestAnimationFrame(() => {
+					if (autoselect) {
+						elm.select()
+					}
+				})
+			},
+			[autoselect]
+		)
+
+		const handleChange = React.useCallback(
+			(e: React.ChangeEvent<HTMLInputElement>) => {
+				const value = e.currentTarget.value
+				rCurrentValue.current = value
+				onValueChange?.(value)
+			},
+			[onValueChange]
+		)
+
+		const handleKeyUp = React.useCallback(
+			(e: React.KeyboardEvent<HTMLInputElement>) => {
+				switch (e.key) {
+					case 'Enter': {
+						e.currentTarget.blur()
+						stopEventPropagation(e)
+						onComplete?.(e.currentTarget.value)
+						break
+					}
+					case 'Escape': {
+						e.currentTarget.value = rInitialValue.current
+						e.currentTarget.blur()
+						stopEventPropagation(e)
+						onCancel?.(e.currentTarget.value)
+						break
+					}
+				}
+			},
+			[onComplete, onCancel]
+		)
+
+		const handleBlur = React.useCallback(
+			(e: React.FocusEvent<HTMLInputElement>) => {
+				setIsFocused(false)
+				const value = e.currentTarget.value
+				onBlur?.(value)
+			},
+			[onBlur]
+		)
+
+		React.useEffect(() => {
+			if (!editor.environment.isIos) return
+
+			const visualViewport = window.visualViewport
+			if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {
+				const onViewportChange = () => {
+					rInputRef.current?.scrollIntoView({ block: 'center' })
+				}
+				visualViewport.addEventListener('resize', onViewportChange)
+				visualViewport.addEventListener('scroll', onViewportChange)
+
+				requestAnimationFrame(() => {
+					rInputRef.current?.scrollIntoView({ block: 'center' })
+				})
+
+				return () => {
+					visualViewport.removeEventListener('resize', onViewportChange)
+					visualViewport.removeEventListener('scroll', onViewportChange)
+				}
+			}
+		}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])
+
+		return (
+			<div draggable={false} className="tlui-input__wrapper">
+				{children}
+				{label && <label>{msg(label)}</label>}
+				{iconLeft && <TldrawUiIcon icon={iconLeft} className="tlui-icon-left" small />}
+				<input
+					ref={rInputRef}
+					className={classNames('tlui-input', className)}
+					type="text"
+					defaultValue={defaultValue}
+					onKeyUp={handleKeyUp}
+					onChange={handleChange}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					autoFocus={autofocus}
+					placeholder={placeholder}
+					value={value}
+				/>
+				{icon && <TldrawUiIcon icon={icon} small={!!label} />}
+			</div>
+		)
+	}
+)

packages/tldraw/src/lib/ui/components/primitives/TldrawUiKbd.tsx

@@ -1,14 +1,14 @@
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
-import { kbd } from './shared'
+import { kbd } from '../../kbd-utils'
 
-/** @internal */
-export interface KbdProps {
+/** @public */
+export interface TLUiKbdProps {
 	children: string
 }
 
-/** @internal */
-export function Kbd({ children }: KbdProps) {
+/** @public */
+export function TldrawUiKbd({ children }: TLUiKbdProps) {
 	const breakpoint = useBreakpoint()
 	if (breakpoint < PORTRAIT_BREAKPOINT.MOBILE) return null
 	return (

packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx

@@ -2,7 +2,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useContainer } from '@tldraw/editor'
 import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
-import { Button, TLUiButtonProps } from './Button'
 
 /** @public */
 export type TLUiPopoverProps = {
@@ -13,7 +12,7 @@ export type TLUiPopoverProps = {
 }
 
 /** @public */
-export function Popover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
+export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
 	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
 
 	return (
@@ -27,15 +26,15 @@ export function Popover({ id, children, onOpenChange, open }: TLUiPopoverProps)
 }
 
 /** @public */
-export interface TLUiPopoverTriggerProps extends TLUiButtonProps {
+export interface TLUiPopoverTriggerProps {
 	children?: React.ReactNode
 }
 
 /** @public */
-export function PopoverTrigger({ children, ...rest }: TLUiPopoverTriggerProps) {
+export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {
 	return (
 		<PopoverPrimitive.Trigger asChild dir="ltr">
-			<Button {...rest}>{children}</Button>
+			{children}
 		</PopoverPrimitive.Trigger>
 	)
 }
@@ -50,7 +49,7 @@ export type TLUiPopoverContentProps = {
 }
 
 /** @public */
-export function PopoverContent({
+export function TldrawUiPopoverContent({
 	side,
 	children,
 	align = 'center',

packages/tldraw/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -5,7 +5,7 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 
 /** @internal */
-export interface SliderProps {
+export interface TLUiSliderProps {
 	steps: number
 	value: number | null
 	label: string
@@ -15,7 +15,7 @@ export interface SliderProps {
 }
 
 /** @internal */
-export const Slider = memo(function Slider(props: SliderProps) {
+export const TldrawUiSlider = memo(function Slider(props: TLUiSliderProps) {
 	const { title, steps, value, label, onValueChange } = props
 	const editor = useEditor()
 	const msg = useTranslation()

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -1,13 +1,13 @@
 import * as _ContextMenu from '@radix-ui/react-context-menu'
 import * as _DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { preventDefault } from '@tldraw/editor'
-import { unwrapLabel } from '../../context/actions'
-import { TLUiEventSource } from '../../context/events'
-import { useReadonly } from '../../hooks/useReadonly'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Icon } from '../primitives/Icon'
-import { Kbd } from '../primitives/Kbd'
+import { unwrapLabel } from '../../../context/actions'
+import { TLUiEventSource } from '../../../context/events'
+import { useReadonly } from '../../../hooks/useReadonly'
+import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -63,13 +63,13 @@ export function TldrawUiMenuCheckboxItem<
 					disabled={disabled}
 					checked={checked}
 				>
-					<Icon small icon={checked ? 'check' : 'checkbox-empty'} />
+					<TldrawUiIcon small icon={checked ? 'check' : 'checkbox-empty'} />
 					{labelStr && (
 						<span className="tlui-button__label" draggable={false}>
 							{labelStr}
 						</span>
 					)}
-					{kbd && <Kbd>{kbd}</Kbd>}
+					{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
 				</_DropdownMenu.CheckboxItem>
 			)
 		}
@@ -87,13 +87,13 @@ export function TldrawUiMenuCheckboxItem<
 					disabled={disabled}
 					checked={checked}
 				>
-					<Icon small icon={checked ? 'check' : 'checkbox-empty'} />
+					<TldrawUiIcon small icon={checked ? 'check' : 'checkbox-empty'} />
 					{labelStr && (
 						<span className="tlui-button__label" draggable={false}>
 							{labelStr}
 						</span>
 					)}
-					{kbd && <Kbd>{kbd}</Kbd>}
+					{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
 				</_ContextMenu.CheckboxItem>
 			)
 		}

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react'
-import { TLUiEventSource } from '../../context/events'
+import { TLUiEventSource } from '../../../context/events'
 
 /** @public */
 export type TldrawUiMenuContextType =

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx

@@ -1,8 +1,8 @@
 import { ContextMenuGroup } from '@radix-ui/react-context-menu'
-import { unwrapLabel } from '../../context/actions'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { DropdownMenuGroup } from '../primitives/DropdownMenu'
+import { unwrapLabel } from '../../../context/actions'
+import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -33,9 +33,12 @@ export function TldrawUiMenuGroup({ id, label, small = false, children }: TLUiMe
 		}
 		case 'menu': {
 			return (
-				<DropdownMenuGroup data-testid={`${sourceId}-group.${id}`} size={small ? 'tiny' : 'medium'}>
+				<TldrawUiDropdownMenuGroup
+					data-testid={`${sourceId}-group.${id}`}
+					size={small ? 'tiny' : 'medium'}
+				>
 					{children}
-				</DropdownMenuGroup>
+				</TldrawUiDropdownMenuGroup>
 			)
 		}
 		case 'context-menu': {

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -1,16 +1,18 @@
 import { ContextMenuItem } from '@radix-ui/react-context-menu'
 import { preventDefault } from '@tldraw/editor'
 import { useState } from 'react'
-import { unwrapLabel } from '../../context/actions'
-import { TLUiEventSource } from '../../context/events'
-import { useReadonly } from '../../hooks/useReadonly'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Spinner } from '../Spinner'
-import { Button } from '../primitives/Button'
-import { DropdownMenuItem } from '../primitives/DropdownMenu'
-import { Kbd } from '../primitives/Kbd'
-import { kbdStr } from '../primitives/shared'
+import { unwrapLabel } from '../../../context/actions'
+import { TLUiEventSource } from '../../../context/events'
+import { useReadonly } from '../../../hooks/useReadonly'
+import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { kbdStr } from '../../../kbd-utils'
+import { Spinner } from '../../Spinner'
+import { TldrawUiButton } from '../Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
+import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
+import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -90,24 +92,27 @@ export function TldrawUiMenuItem<
 	switch (menuType) {
 		case 'menu': {
 			return (
-				<DropdownMenuItem
-					type="menu"
-					data-testid={`${sourceId}.${id}`}
-					kbd={kbd}
-					label={labelStr}
-					disabled={disabled}
-					title={titleStr}
-					onClick={(e) => {
-						if (noClose) {
-							preventDefault(e)
-						}
-						if (disableClicks) {
-							setDisableClicks(false)
-						} else {
-							onSelect(sourceId)
-						}
-					}}
-				/>
+				<TldrawUiDropdownMenuItem>
+					<TldrawUiButton
+						type="menu"
+						data-testid={`${sourceId}.${id}`}
+						disabled={disabled}
+						title={titleStr}
+						onClick={(e) => {
+							if (noClose) {
+								preventDefault(e)
+							}
+							if (disableClicks) {
+								setDisableClicks(false)
+							} else {
+								onSelect(sourceId)
+							}
+						}}
+					>
+						<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+						{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
+					</TldrawUiButton>
+				</TldrawUiDropdownMenuItem>
 			)
 		}
 		case 'context-menu': {
@@ -133,37 +138,37 @@ export function TldrawUiMenuItem<
 					<span className="tlui-button__label" draggable={false}>
 						{labelStr}
 					</span>
-					{kbd && <Kbd>{kbd}</Kbd>}
+					{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}
 					{spinner && <Spinner />}
 				</ContextMenuItem>
 			)
 		}
 		case 'panel': {
 			return (
-				<Button
+				<TldrawUiButton
 					data-testid={`${sourceId}.${id}`}
-					icon={icon}
 					type="menu"
-					label={labelStr}
 					title={titleStr}
-					onClick={() => onSelect(sourceId)}
-					smallIcon
 					disabled={disabled}
-				/>
+					onClick={() => onSelect(sourceId)}
+				>
+					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+					{icon && <TldrawUiButtonIcon icon={icon} />}
+				</TldrawUiButton>
 			)
 		}
 		case 'small-icons':
 		case 'icons': {
 			return (
-				<Button
+				<TldrawUiButton
 					data-testid={`${sourceId}.${id}`}
-					icon={icon}
 					type="icon"
 					title={titleStr}
-					onClick={() => onSelect(sourceId)}
 					disabled={disabled}
-					smallIcon={menuType === 'small-icons'}
-				/>
+					onClick={() => onSelect(sourceId)}
+				>
+					<TldrawUiButtonIcon icon={icon!} small={menuType === 'small-icons'} />
+				</TldrawUiButton>
 			)
 		}
 		case 'keyboard-shortcuts': {
@@ -173,14 +178,17 @@ export function TldrawUiMenuItem<
 				<div className="tlui-shortcuts-dialog__key-pair" data-testid={`${sourceId}.${id}`}>
 					<div className="tlui-shortcuts-dialog__key-pair__key">{labelStr}</div>
 					<div className="tlui-shortcuts-dialog__key-pair__value">
-						<Kbd>{kbd!}</Kbd>
+						<TldrawUiKbd>{kbd!}</TldrawUiKbd>
 					</div>
 				</div>
 			)
 		}
 		case 'helper-buttons': {
 			return (
-				<Button type="low" label={labelStr} iconLeft={icon} onClick={() => onSelect(sourceId)} />
+				<TldrawUiButton type="low" onClick={() => onSelect(sourceId)}>
+					<TldrawUiButtonIcon icon={icon!} />
+					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+				</TldrawUiButton>
 			)
 		}
 		default: {

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuSubmenu.tsx

@@ -5,15 +5,17 @@ import {
 	ContextMenuSubTrigger,
 } from '@radix-ui/react-context-menu'
 import { useContainer } from '@tldraw/editor'
-import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
-import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
-import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { Button } from '../primitives/Button'
+import { useMenuIsOpen } from '../../../hooks/useMenuIsOpen'
+import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { TldrawUiButton } from '../Button/TldrawUiButton'
+import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
+import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
 import {
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-} from '../primitives/DropdownMenu'
+	TldrawUiDropdownMenuSub,
+	TldrawUiDropdownMenuSubContent,
+	TldrawUiDropdownMenuSubTrigger,
+} from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -46,34 +48,33 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
 	switch (menuType) {
 		case 'menu': {
 			return (
-				<DropdownMenuSub id={`${sourceId}-sub.${id}`}>
-					<DropdownMenuSubTrigger
+				<TldrawUiDropdownMenuSub id={`${sourceId}-sub.${id}`}>
+					<TldrawUiDropdownMenuSubTrigger
 						id={`${sourceId}-sub.${id}`}
 						disabled={disabled}
 						label={labelStr!}
 						title={labelStr!}
 					/>
-					<DropdownMenuSubContent id={`${sourceId}-sub-content.${id}`} data-size={size}>
+					<TldrawUiDropdownMenuSubContent id={`${sourceId}-sub-content.${id}`} data-size={size}>
 						{children}
-					</DropdownMenuSubContent>
-				</DropdownMenuSub>
+					</TldrawUiDropdownMenuSubContent>
+				</TldrawUiDropdownMenuSub>
 			)
 		}
 		case 'context-menu': {
+			if (disabled) return null
+
 			return (
 				<ContextMenuSubWithMenu id={`${sourceId}-sub.${id}`}>
-					<ContextMenuSubTrigger
-						dir="ltr"
-						disabled={disabled}
-						data-testid={`${sourceId}-sub-trigger.${id}`}
-						asChild
-					>
-						<Button
+					<ContextMenuSubTrigger dir="ltr" disabled={disabled} asChild>
+						<TldrawUiButton
+							data-testid={`${sourceId}-sub-trigger.${id}`}
 							type="menu"
 							className="tlui-menu__submenu__trigger"
-							label={labelStr}
-							icon="chevron-right"
-						/>
+						>
+							<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+							<TldrawUiButtonIcon icon="chevron-right" small />
+						</TldrawUiButton>
 					</ContextMenuSubTrigger>
 					<ContextMenuPortal container={container}>
 						<ContextMenuSubContent

packages/tldraw/src/lib/ui/context/TldrawUiContextProvider.tsx

@@ -76,6 +76,7 @@ export function TldrawUiContextProvider({
 		</AssetUrlsProvider>
 	)
 }
+
 function InternalProviders({
 	overrides,
 	children,

packages/tldraw/src/lib/ui/context/components.tsx

@@ -19,6 +19,7 @@ import {
 	TLUiKeyboardShortcutsDialogProps,
 } from '../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog'
 import { DefaultMainMenu, TLUiMainMenuProps } from '../components/MainMenu/DefaultMainMenu'
+import { DefaultMenuPanel } from '../components/MenuPanel'
 import { DefaultMinimap } from '../components/Minimap/DefaultMinimap'
 import { DefaultNavigationPanel } from '../components/NavigationPanel/DefaultNavigationPanel'
 import { DefaultPageMenu } from '../components/PageMenu/DefaultPageMenu'
@@ -45,6 +46,9 @@ export interface BaseTLUiComponents {
 	QuickActions: ComponentType<TLUiQuickActionsProps>
 	HelperButtons: ComponentType<TLUiHelperButtonsProps>
 	DebugMenu: ComponentType
+	MenuPanel: ComponentType
+	TopPanel: ComponentType
+	SharePanel: ComponentType
 }
 
 /** @public */
@@ -54,7 +58,8 @@ export type TLUiComponents = Partial<{
 
 const TldrawUiComponentsContext = createContext({} as TLUiComponents)
 
-type ComponentsContextProviderProps = {
+/** @public */
+export type TLUiComponentsProviderProps = {
 	overrides?: TLUiComponents
 	children: any
 }
@@ -63,7 +68,7 @@ type ComponentsContextProviderProps = {
 export function TldrawUiComponentsProvider({
 	overrides = {},
 	children,
-}: ComponentsContextProviderProps) {
+}: TLUiComponentsProviderProps) {
 	const _overrides = useShallowObjectIdentity(overrides)
 
 	return (
@@ -84,6 +89,7 @@ export function TldrawUiComponentsProvider({
 					QuickActions: DefaultQuickActions,
 					HelperButtons: DefaultHelperButtons,
 					DebugMenu: DefaultDebugMenu,
+					MenuPanel: DefaultMenuPanel,
 					..._overrides,
 				}),
 				[_overrides]

packages/tldraw/src/lib/ui/kbd-utils.ts

@@ -1,11 +1,3 @@
-/** @internal */
-export function toStartCase(str: string) {
-	return str
-		.split(' ')
-		.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-		.join(' ')
-}
-
 const isDarwin =
 	typeof window === 'undefined'
 		? false
@@ -13,7 +5,7 @@ const isDarwin =
 const cmdKey = isDarwin ? '⌘' : 'Ctrl'
 const altKey = isDarwin ? '⌥' : 'Alt'
 
-/** @internal */
+/** @public */
 export function kbd(str: string) {
 	return str
 		.split(',')[0]
@@ -24,17 +16,7 @@ export function kbd(str: string) {
 		})
 }
 
-/** @internal */
+/** @public */
 export function kbdStr(str: string) {
-	return (
-		'— ' +
-		str
-			.split(',')[0]
-			.split('')
-			.map((sub) => {
-				const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, '⇧')
-				return subStr[0].toUpperCase() + subStr.slice(1)
-			})
-			.join(' ')
-	)
+	return '— ' + kbd(str).join(' ')
 }