diff --git a/docs/manifest.json b/docs/manifest.json
index b9b8a239a36ba..abcc27569c88e 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1199,6 +1199,18 @@
 		"markdown_source": "../packages/components/src/toolbar-button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ToolbarGroup",
+		"slug": "toolbar-group",
+		"markdown_source": "../packages/components/src/toolbar-group/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "ToolbarItem",
+		"slug": "toolbar-item",
+		"markdown_source": "../packages/components/src/toolbar-item/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Toolbar",
 		"slug": "toolbar",
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 0b45496222043..d4b9cc66ead73 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -7,10 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	__experimentalToolbarItem as ToolbarItem,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index 7014f29f0e336..0b0b1a775e736 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	__experimentalToolbarItem as ToolbarItem,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 1326e7c76cff7..6f77c5ccf8be3 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -11,7 +11,7 @@ import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 	MenuGroup,
 	Popover,
 } from '@wordpress/components';
diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js
index d0816a6236890..931932b7ab6da 100644
--- a/packages/block-editor/src/components/navigable-toolbar/index.js
+++ b/packages/block-editor/src/components/navigable-toolbar/index.js
@@ -9,6 +9,7 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
@@ -23,7 +24,7 @@ function useUpdateLayoutEffect( effect, deps ) {
 }
 
 function hasOnlyToolbarItem( elements ) {
-	const dataProp = 'experimentalToolbarItem';
+	const dataProp = 'toolbarItem';
 	return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) );
 }
 
@@ -59,7 +60,15 @@ function useIsAccessibleToolbar( ref ) {
 
 	const determineIsAccessibleToolbar = useCallback( () => {
 		const tabbables = focus.tabbable.find( ref.current );
-		setIsAccessibleToolbar( hasOnlyToolbarItem( tabbables ) );
+		const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
+		if ( ! onlyToolbarItem ) {
+			deprecated( 'Using custom components as toolbar controls', {
+				alternative: 'ToolbarItem or ToolbarButton components',
+				link:
+					'https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols',
+			} );
+		}
+		setIsAccessibleToolbar( onlyToolbarItem );
 	}, [] );
 
 	useLayoutEffect( determineIsAccessibleToolbar, [] );
@@ -106,7 +115,7 @@ function NavigableToolbar( { children, focusOnMount, ...props } ) {
 	if ( isAccessibleToolbar ) {
 		return (
 			<Toolbar
-				__experimentalAccessibilityLabel={ props[ 'aria-label' ] }
+				label={ props[ 'aria-label' ] }
 				ref={ wrapper }
 				{ ...props }
 			>
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index e0c35b11cdae5..4e98ce8d064ba 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -10,7 +10,7 @@ import { orderBy } from 'lodash';
 
 import { __ } from '@wordpress/i18n';
 import {
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 	ToolbarGroup,
 	DropdownMenu,
 	Slot,
diff --git a/packages/block-library/src/classic/edit.js b/packages/block-library/src/classic/edit.js
index 238afa052a15b..8195e51006af4 100644
--- a/packages/block-library/src/classic/edit.js
+++ b/packages/block-library/src/classic/edit.js
@@ -7,7 +7,7 @@ import { debounce } from 'lodash';
  * WordPress dependencies
  */
 import { BlockControls } from '@wordpress/block-editor';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
@@ -248,9 +248,9 @@ export default class ClassicEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						<ConvertToBlocksButton clientId={ clientId } />
-					</Toolbar>
+					</ToolbarGroup>
 				</BlockControls>
 				<div
 					key="toolbar"
diff --git a/packages/block-library/src/heading/heading-level-dropdown.js b/packages/block-library/src/heading/heading-level-dropdown.js
index 263d0a8ba650c..c936c9383ba83 100644
--- a/packages/block-library/src/heading/heading-level-dropdown.js
+++ b/packages/block-library/src/heading/heading-level-dropdown.js
@@ -69,9 +69,7 @@ export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 			renderContent={ () => (
 				<Toolbar
 					className="block-library-heading-level-toolbar"
-					__experimentalAccessibilityLabel={ __(
-						'Change heading level'
-					) }
+					label={ __( 'Change heading level' ) }
 				>
 					<ToolbarGroup
 						isCollapsed={ false }
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
index 361355ee8d9a5..895d337c2699d 100644
--- a/packages/block-library/src/image/image-editor.js
+++ b/packages/block-library/src/image/image-editor.js
@@ -20,7 +20,7 @@ import {
 import {
 	ToolbarGroup,
 	ToolbarButton,
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 	Spinner,
 	RangeControl,
 	DropdownMenu,
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index bd369b1fa7b70..aecf5cb7ba8ca 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -25,7 +25,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarGroup,
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 } from '@wordpress/components';
 import {
 	alignLeft,
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 7c1ec414adbae..cc2bc1deb3ace 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -99,7 +99,7 @@ export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
 export { default as __experimentalToolbarContext } from './toolbar-context';
 export { default as ToolbarGroup } from './toolbar-group';
-export { default as __experimentalToolbarItem } from './toolbar-item';
+export { default as ToolbarItem } from './toolbar-item';
 export { default as Tooltip } from './tooltip';
 export {
 	default as __experimentalTreeGrid,
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 20e96402d21d6..04f883ce5fe13 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -18,7 +18,7 @@ export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
 export { default as __experimentalToolbarContext } from './toolbar-context';
 export { default as ToolbarGroup } from './toolbar-group';
-export { default as __experimentalToolbarItem } from './toolbar-item';
+export { default as ToolbarItem } from './toolbar-item';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
 export { default as Spinner } from './spinner';
diff --git a/packages/components/src/toolbar-button/README.md b/packages/components/src/toolbar-button/README.md
index 6c276b0e08c54..5d7f8f1fb1955 100644
--- a/packages/components/src/toolbar-button/README.md
+++ b/packages/components/src/toolbar-button/README.md
@@ -1,19 +1,52 @@
 # ToolbarButton
 
-A ToolbarButton can be used to add actions to your block control, usually inside a ToolbarGroup. It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
+ToolbarButton can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md).
+
+It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
 
 ## Usage
 
+To create general interfaces, you'll want to render ToolbarButton in a [Toolbar](/packages/components/src/toolbar/README.md) component.
+
 ```jsx
-import { ToolbarButton } from "@wordpress/components";
-import { edit } from "@wordpress/icons";
- 
-const MyToolbarButton = () => (
-    <MyToolbarButton
-        title="Edit"
-        icon={ edit }
-        onClick={ onEdit } />
-);
+import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { edit } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarButton
+				icon={ edit }
+				label="Edit"
+				onClick={ () => alert( 'Editing' ) }
+			/>
+		</Toolbar>
+	);
+}
+```
+
+### Inside BlockControls
+
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optinally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+
+```jsx
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { edit } from '@wordpress/icons';
+
+function Edit() {
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton
+					icon={ edit }
+					label="Edit"
+					onClick={ () => alert( 'Editing' ) }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
 ```
 
 ## Props
diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar-button/index.js
index f449ecdd2d523..d053ea2b52cf6 100644
--- a/packages/components/src/toolbar-button/index.js
+++ b/packages/components/src/toolbar-button/index.js
@@ -30,8 +30,6 @@ function ToolbarButton(
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( ! accessibleToolbarState ) {
-		// This should be deprecated when <Toolbar __experimentalAccessibilityLabel="label">
-		// becomes stable.
 		return (
 			<ToolbarButtonContainer className={ containerClassName }>
 				<Button
@@ -52,7 +50,7 @@ function ToolbarButton(
 					) }
 					isPressed={ isActive }
 					disabled={ isDisabled }
-					data-experimental-toolbar-item
+					data-toolbar-item
 					{ ...extraProps }
 					{ ...props }
 				>
diff --git a/packages/components/src/toolbar-button/stories/index.js b/packages/components/src/toolbar-button/stories/index.js
index 1bb0475003e16..cd13dbb3274d9 100644
--- a/packages/components/src/toolbar-button/stories/index.js
+++ b/packages/components/src/toolbar-button/stories/index.js
@@ -16,7 +16,7 @@ export const _default = () => {
 	const icon = text( 'Icon', 'wordpress' );
 
 	return (
-		<Toolbar __experimentalAccessibilityLabel="Example Toolbar">
+		<Toolbar label="Example Toolbar">
 			<ToolbarButton icon={ icon } label={ label } />
 		</Toolbar>
 	);
diff --git a/packages/components/src/toolbar-group/README.md b/packages/components/src/toolbar-group/README.md
new file mode 100644
index 0000000000000..0a757f5b40032
--- /dev/null
+++ b/packages/components/src/toolbar-group/README.md
@@ -0,0 +1,33 @@
+# ToolbarGroup
+
+A ToolbarGroup can be used to create subgroups of controls inside a [Toolbar](/packages/components/src/toolbar/README.md).
+
+## Usage
+
+```jsx
+import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { paragraph, formatBold, formatItalic, link } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarGroup>
+				<ToolbarButton icon={ paragraph } label="Paragraph" />
+			</ToolbarGroup>
+			<ToolbarGroup>
+				<ToolbarButton icon={ formatBold } label="Bold" />
+				<ToolbarButton icon={ formatItalic } label="Italic" />
+				<ToolbarButton icon={ link } label="Link" />
+			</ToolbarGroup>
+		</Toolbar>
+	);
+}
+```
+
+### Props
+
+ToolbarGroup will pass all HTML props to the underlying element.
+
+## Related components
+
+* ToolbarGroup may contain [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
diff --git a/packages/components/src/toolbar-group/index.js b/packages/components/src/toolbar-group/index.js
index 86639e9e62823..595035fc59ee8 100644
--- a/packages/components/src/toolbar-group/index.js
+++ b/packages/components/src/toolbar-group/index.js
@@ -56,7 +56,7 @@ function ToolbarGroup( {
 	...props
 } ) {
 	// It'll contain state if `ToolbarGroup` is being used within
-	// `<Toolbar accessibilityLabel="label" />`
+	// `<Toolbar label="label" />`
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( ( ! controls || ! controls.length ) && ! children ) {
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.js b/packages/components/src/toolbar-group/toolbar-group-collapsed.js
index 1c020ad84d5c4..05b30b17fc251 100644
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.js
+++ b/packages/components/src/toolbar-group/toolbar-group-collapsed.js
@@ -12,7 +12,7 @@ import ToolbarItem from '../toolbar-item';
 
 function ToolbarGroupCollapsed( { controls = [], ...props } ) {
 	// It'll contain state if `ToolbarGroup` is being used within
-	// `<Toolbar __experimentalAccessibilityLabel="label" />`
+	// `<Toolbar label="label" />`
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	const renderDropdownMenu = ( toggleProps ) => (
@@ -20,7 +20,7 @@ function ToolbarGroupCollapsed( { controls = [], ...props } ) {
 			controls={ controls }
 			toggleProps={ {
 				...toggleProps,
-				'data-experimental-toolbar-item': true,
+				'data-toolbar-item': true,
 			} }
 			{ ...props }
 		/>
diff --git a/packages/components/src/toolbar-item/README.md b/packages/components/src/toolbar-item/README.md
new file mode 100644
index 0000000000000..db6d38da04168
--- /dev/null
+++ b/packages/components/src/toolbar-item/README.md
@@ -0,0 +1,72 @@
+# ToolbarItem
+
+A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md).
+
+## Usage
+
+### `as` prop
+
+You can use the `as` prop with a custom component or any HTML element.
+
+```jsx
+import { Toolbar, ToolbarItem, Button } from '@wordpress/components';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
+			<ToolbarItem as="button">I am another toolbar button</ToolbarItem>
+		</Toolbar>
+	);
+}
+```
+
+### render prop
+
+You can pass children as function to get the ToolbarItem props and pass them to another component.
+
+```jsx
+import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
+import { table } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarItem>
+				{ ( toolbarItemHTMLProps ) => (
+					<DropdownMenu
+						icon={ table }
+						toggleProps={ toolbarItemHTMLProps }
+						label={ 'Edit table' }
+						controls={ [] }
+					/>
+				) }
+			</ToolbarItem>
+		</Toolbar>
+	);
+}
+```
+
+### Inside BlockControls
+
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optinally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+
+```jsx
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
+
+function Edit() {
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+```
+
+## Related components
+
+* ToolbarItem should be used inside [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+* If you want a simple toolbar button, consider using [ToolbarButton](/packages/components/src/toolbar-button/README.md) instead.
diff --git a/packages/components/src/toolbar-item/index.js b/packages/components/src/toolbar-item/index.js
index 127f8e51d4b48..7f938d55f8558 100644
--- a/packages/components/src/toolbar-item/index.js
+++ b/packages/components/src/toolbar-item/index.js
@@ -19,12 +19,13 @@ function ToolbarItem( { children, as: Component, ...props }, ref ) {
 
 	if ( typeof children !== 'function' && ! Component ) {
 		warning(
-			'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component.'
+			'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +
+				'See https://developer.wordpress.org/block-editor/components/toolbar-item/'
 		);
 		return null;
 	}
 
-	const allProps = { ...props, ref, 'data-experimental-toolbar-item': true };
+	const allProps = { ...props, ref, 'data-toolbar-item': true };
 
 	if ( ! accessibleToolbarState ) {
 		if ( Component ) {
diff --git a/packages/components/src/toolbar/README.md b/packages/components/src/toolbar/README.md
index 7458cb2e00936..65e523766feb3 100644
--- a/packages/components/src/toolbar/README.md
+++ b/packages/components/src/toolbar/README.md
@@ -8,15 +8,12 @@ Toolbar can be used to group related options. To emphasize groups of related ico
 
 1. [Design guidelines](#design-guidelines)
 2. [Development guidelines](#development-guidelines)
+3. [Related components](#related-components)
 
 ## Design guidelines
 
 ### Usage
 
-#### Selected action
-
-Only one option in a toolbar can be selected and active at a time. Selecting one option deselects any other.
-
 ### Best practices
 
 Toolbars should:
@@ -30,11 +27,13 @@ Toolbars should:
 ### States
 
 #### Active and available toolbars
+
 A toolbar’s state makes it clear which icon button is active. Hover and focus states express the available selection options for icon buttons in a toolbar.
 
 ![Toolbar component](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541784539545_ButtonGroup.png)
 
 #### Disabled toolbars
+
 Toolbars that cannot be selected can either be given a disabled state, or be hidden.
 
 ## Development guidelines
@@ -42,23 +41,31 @@ Toolbars that cannot be selected can either be given a disabled state, or be hid
 ### Usage
 
 ```jsx
-import { Toolbar } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyToolbar = withState( {
-	activeControl: 'up',
-} )( ( { activeControl, setState } ) => { 
-	function createThumbsControl( thumbs ) {
-		return {
-			icon: `thumbs-${ thumbs }`,
-			title: `Thumbs ${ thumbs }`,
-			isActive: activeControl === thumbs,
-			onClick: () => setState( { activeControl: thumbs } ),
-		};
-	}
-	
+import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { formatBold, formatItalic, link } from '@wordpress/icons';
+
+function MyToolbar() {
 	return (
-		<Toolbar controls={ [ 'up', 'down' ].map( createThumbsControl ) } />
+		<Toolbar label="Options">
+			<ToolbarButton icon={ formatBold } label="Bold" />
+			<ToolbarButton icon={ formatItalic } label="Italic" />
+			<ToolbarButton icon={ link } label="Link" />
+		</Toolbar>
 	);
-} );
+}
 ```
+
+### Props
+
+Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.
+
+#### label
+
+An accessible label for the toolbar.
+
+- Type: `String`
+- Required: Yes
+
+## Related components
+
+* Toolbar may contain [ToolbarGroup](/packages/components/src/toolbar-group/README.md), [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
\ No newline at end of file
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index ebf8e3482bf63..b94886bd9ce74 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -19,34 +20,33 @@ import ToolbarContainer from './toolbar-container';
  *
  * To add controls, simply pass `ToolbarButton` components as children.
  *
- * @param {Object} props                                    Component props.
- * @param {string} [props.className]                        Class to set on the container div.
- * @param {string} [props.__experimentalAccessibilityLabel] ARIA label for toolbar container.
- * @param {Object} ref                                      React Element ref.
+ * @param {Object} props Component props.
+ * @param {string} [props.className] Class to set on the container div.
+ * @param {string} [props.label] ARIA label for toolbar container.
+ * @param {Object} ref React Element ref.
  */
-function Toolbar(
-	{ className, __experimentalAccessibilityLabel, ...props },
-	ref
-) {
-	if ( __experimentalAccessibilityLabel ) {
-		return (
-			<ToolbarContainer
-				// `ToolbarGroup` already uses components-toolbar for compatibility reasons
-				className={ classnames(
-					'components-accessible-toolbar',
-					className
-				) }
-				accessibilityLabel={ __experimentalAccessibilityLabel }
-				ref={ ref }
-				{ ...props }
-			/>
-		);
+function Toolbar( { className, label, ...props }, ref ) {
+	if ( ! label ) {
+		deprecated( 'Using Toolbar without label prop', {
+			alternative: 'ToolbarGroup component',
+			link:
+				'https://developer.wordpress.org/block-editor/components/toolbar/',
+		} );
+		return <ToolbarGroup { ...props } className={ className } />;
 	}
-	// When the __experimentalAccessibilityLabel prop is not passed, Toolbar will
-	// fallback to ToolbarGroup. This should be deprecated as soon as the new API
-	// gets stable.
-	// See https://github.com/WordPress/gutenberg/pull/20008#issuecomment-624503410
-	return <ToolbarGroup { ...props } className={ className } />;
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons
+	const finalClassName = classnames(
+		'components-accessible-toolbar',
+		className
+	);
+	return (
+		<ToolbarContainer
+			className={ finalClassName }
+			label={ label }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
 }
 
 export default forwardRef( Toolbar );
diff --git a/packages/components/src/toolbar/stories/index.js b/packages/components/src/toolbar/stories/index.js
index 2749329089b77..ae07d52535c9c 100644
--- a/packages/components/src/toolbar/stories/index.js
+++ b/packages/components/src/toolbar/stories/index.js
@@ -23,7 +23,7 @@ import {
 	Path,
 	ToolbarButton,
 	ToolbarGroup,
-	__experimentalToolbarItem as ToolbarItem,
+	ToolbarItem,
 	DropdownMenu,
 } from '../../';
 
@@ -41,10 +41,7 @@ function InlineImageIcon() {
 export const _default = () => {
 	return (
 		// id is required for server side rendering
-		<Toolbar
-			__experimentalAccessibilityLabel="Options"
-			id="options-toolbar"
-		>
+		<Toolbar label="Options" id="options-toolbar">
 			<ToolbarGroup>
 				<ToolbarButton icon={ paragraph } label="Paragraph" />
 			</ToolbarGroup>
@@ -115,10 +112,7 @@ export const _default = () => {
 export const withoutGroup = () => {
 	return (
 		// id is required for server side rendering
-		<Toolbar
-			__experimentalAccessibilityLabel="Options"
-			id="options-toolbar-without-group"
-		>
+		<Toolbar label="Options" id="options-toolbar-without-group">
 			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
 			<ToolbarButton icon={ formatItalic } label="Italic" />
 			<ToolbarButton icon={ link } label="Link" />
diff --git a/packages/components/src/toolbar/test/index.js b/packages/components/src/toolbar/test/index.js
index d5de14b4a86c5..11fc7d7e4e084 100644
--- a/packages/components/src/toolbar/test/index.js
+++ b/packages/components/src/toolbar/test/index.js
@@ -13,7 +13,7 @@ describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a toolbar with toolbar buttons', () => {
 			const { getByLabelText } = render(
-				<Toolbar __experimentalAccessibilityLabel="blocks">
+				<Toolbar label="blocks">
 					<ToolbarButton label="control1" />
 					<ToolbarButton label="control2" />
 				</Toolbar>
@@ -27,45 +27,4 @@ describe( 'Toolbar', () => {
 			).toBeTruthy();
 		} );
 	} );
-
-	describe( 'ToolbarGroup', () => {
-		it( 'should render an empty node, when controls are not passed', () => {
-			const { container } = render( <Toolbar /> );
-
-			expect( container.innerHTML ).toBe( '' );
-		} );
-
-		it( 'should render an empty node, when controls are empty', () => {
-			const { container } = render( <Toolbar controls={ [] } /> );
-
-			expect( container.innerHTML ).toBe( '' );
-		} );
-
-		it( 'should render a list of controls with buttons', () => {
-			const controls = [
-				{
-					icon: 'wordpress',
-					title: 'WordPress',
-					subscript: 'wp',
-					onClick: () => {},
-					isActive: false,
-				},
-			];
-			const { getByLabelText } = render(
-				<Toolbar controls={ controls } />
-			);
-
-			const toolbarButton = getByLabelText( 'WordPress' );
-			expect( toolbarButton.getAttribute( 'aria-label' ) ).toBe(
-				'WordPress'
-			);
-			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
-				'false'
-			);
-			expect( toolbarButton.getAttribute( 'data-subscript' ) ).toBe(
-				'wp'
-			);
-			expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' );
-		} );
-	} );
 } );
diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js
index 5141e6fe69f95..df4f29c5afc79 100644
--- a/packages/components/src/toolbar/toolbar-container.js
+++ b/packages/components/src/toolbar/toolbar-container.js
@@ -14,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
 import ToolbarContext from '../toolbar-context';
 import { getRTL } from '../utils/rtl';
 
-function ToolbarContainer( { accessibilityLabel, ...props }, ref ) {
+function ToolbarContainer( { label, ...props }, ref ) {
 	// https://reakit.io/docs/basic-concepts/#state-hooks
 	// Passing baseId for server side rendering (which includes snapshots)
 	// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
@@ -29,7 +29,7 @@ function ToolbarContainer( { accessibilityLabel, ...props }, ref ) {
 		<ToolbarContext.Provider value={ toolbarState }>
 			<Toolbar
 				ref={ ref }
-				aria-label={ accessibilityLabel }
+				aria-label={ label }
 				{ ...toolbarState }
 				{ ...props }
 			/>
diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/packages/e2e-tests/specs/editor/various/is-typing.test.js
index 2416b63473816..6f6c0f99fa73a 100644
--- a/packages/e2e-tests/specs/editor/various/is-typing.test.js
+++ b/packages/e2e-tests/specs/editor/various/is-typing.test.js
@@ -43,7 +43,7 @@ describe( 'isTyping', () => {
 	it( 'should not close the dropdown when typing in it', async () => {
 		// Adds a Dropdown with an input to all blocks
 		await page.evaluate( () => {
-			const { Dropdown, Button, Fill } = wp.components;
+			const { Dropdown, ToolbarButton, Fill } = wp.components;
 			const { createElement: el, Fragment } = wp.element;
 			function AddDropdown( BlockListBlock ) {
 				return ( props ) => {
@@ -56,7 +56,7 @@ describe( 'isTyping', () => {
 							el( Dropdown, {
 								renderToggle: ( { onToggle } ) =>
 									el(
-										Button,
+										ToolbarButton,
 										{
 											onClick: onToggle,
 											className: 'dropdown-open',
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 6c178f193ba16..32ef40ea2a581 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -15,10 +15,7 @@ import {
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 } from '@wordpress/editor';
-import {
-	Button,
-	__experimentalToolbarItem as ToolbarItem,
-} from '@wordpress/components';
+import { Button, ToolbarItem } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 
 function HeaderToolbar() {