diff --git a/packages/slate-react/src/components/controls-provider.tsx b/packages/slate-react/src/components/toolbar-provider.tsx
similarity index 94%
rename from packages/slate-react/src/components/controls-provider.tsx
rename to packages/slate-react/src/components/toolbar-provider.tsx
index 86541a083a7..96ad5fae716 100644
--- a/packages/slate-react/src/components/controls-provider.tsx
+++ b/packages/slate-react/src/components/toolbar-provider.tsx
@@ -5,7 +5,7 @@ import { ReactEditor } from '../plugin/react-editor'
 
 import { Provider } from './provider'
 
-export const ControlsProvider = (props: {
+export const ToolbarProvider = (props: {
   editor: ReactEditor
   children: React.ReactNode
 }) => {
diff --git a/packages/slate-react/src/index.ts b/packages/slate-react/src/index.ts
index becfdbf7ba3..a0825592151 100644
--- a/packages/slate-react/src/index.ts
+++ b/packages/slate-react/src/index.ts
@@ -10,7 +10,7 @@ export {
 export { DefaultElement } from './components/element'
 export { DefaultLeaf } from './components/leaf'
 export { Slate } from './components/slate'
-export { ControlsProvider } from './components/controls-provider'
+export { ToolbarProvider } from './components/toolbar-provider'
 
 // Hooks
 export { useEditor } from './hooks/use-editor'
diff --git a/site/examples/richtext-detached-controls.tsx b/site/examples/richtext-detached-toolbar.tsx
similarity index 97%
rename from site/examples/richtext-detached-controls.tsx
rename to site/examples/richtext-detached-toolbar.tsx
index d52b0883c87..884eb301922 100644
--- a/site/examples/richtext-detached-controls.tsx
+++ b/site/examples/richtext-detached-toolbar.tsx
@@ -5,7 +5,7 @@ import {
   withReact,
   useSlate,
   Slate,
-  ControlsProvider,
+  ToolbarProvider,
 } from 'slate-react'
 import {
   Editor,
@@ -28,14 +28,14 @@ const HOTKEYS = {
 const LIST_TYPES = ['numbered-list', 'bulleted-list']
 const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify']
 
-const RichTextDetachedControlsExample = () => {
+const RichTextDetachedToolbarExample = () => {
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
     <>
-      <ControlsProvider editor={editor}>
+      <ToolbarProvider editor={editor}>
         <Toolbar style={{ marginBottom: 20 }}>
           <MarkButton format="bold" icon="format_bold" />
           <MarkButton format="italic" icon="format_italic" />
@@ -51,7 +51,7 @@ const RichTextDetachedControlsExample = () => {
           <BlockButton format="right" icon="format_align_right" />
           <BlockButton format="justify" icon="format_align_justify" />
         </Toolbar>
-      </ControlsProvider>
+      </ToolbarProvider>
 
       <Slate editor={editor} initialValue={initialValue}>
         <Editable
@@ -281,4 +281,4 @@ const initialValue: Descendant[] = [
   },
 ]
 
-export default RichTextDetachedControlsExample
+export default RichTextDetachedToolbarExample
diff --git a/site/pages/examples/[example].tsx b/site/pages/examples/[example].tsx
index e20f042371c..47e1c1b1b61 100644
--- a/site/pages/examples/[example].tsx
+++ b/site/pages/examples/[example].tsx
@@ -29,7 +29,7 @@ import Styling from '../../examples/styling'
 import Tables from '../../examples/tables'
 import IFrames from '../../examples/iframe'
 import CustomPlaceholder from '../../examples/custom-placeholder'
-import ReachTextDetachedControls from '../../examples/richtext-detached-controls'
+import RichTextDetachedToolbarExample from '../../examples/richtext-detached-toolbar'
 
 // node
 import { getAllExamples } from '../api'
@@ -52,9 +52,9 @@ const EXAMPLES = [
   ['Read-only', ReadOnly, 'read-only'],
   ['Rich Text', RichText, 'richtext'],
   [
-    'Rich Text Detached Controls',
-    ReachTextDetachedControls,
-    'richtext-detached-controls',
+    'Rich Text Detached Toolbar',
+    RichTextDetachedToolbarExample,
+    'richtext-detached-toolbar',
   ],
   ['Search Highlighting', SearchHighlighting, 'search-highlighting'],
   ['Shadow DOM', ShadowDOM, 'shadow-dom'],