diff --git a/.eslintrc.js b/.eslintrc.js
index 43e259b40c7b7..c6404f79817f4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -16,6 +16,17 @@ const { version } = require( './package' );
  */
 const majorMinorRegExp = escapeRegExp( version.replace( /\.\d+$/, '' ) ) + '(\\.\\d+)?';
 
+/**
+ * The list of patterns matching files used only for development purposes.
+ *
+ * @type {string[]}
+ */
+const developmentFiles = [
+	'**/benchmark/**/*.js',
+	'**/@(__mocks__|__tests__|test)/**/*.js',
+	'**/@(storybook|stories)/**/*.js',
+];
+
 module.exports = {
 	root: true,
 	extends: [
@@ -97,34 +108,42 @@ module.exports = {
 				message: 'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
 			},
 		],
-		'react/forbid-elements': [ 'error', {
-			forbid: [
-				[ 'circle', 'Circle' ],
-				[ 'g', 'G' ],
-				[ 'path', 'Path' ],
-				[ 'polygon', 'Polygon' ],
-				[ 'rect', 'Rect' ],
-				[ 'svg', 'SVG' ],
-			].map( ( [ element, componentName ] ) => {
-				return {
-					element,
-					message: `use cross-platform <${ componentName }> component instead.`,
-				};
-			} ),
-		} ],
 	},
 	overrides: [
 		{
 			files: [ 'packages/**/*.js' ],
+			excludedFiles: [
+				'**/*.@(android|ios|native).js',
+				...developmentFiles,
+			],
 			rules: {
 				'import/no-extraneous-dependencies': 'error',
 			},
+		},
+		{
+			files: [ 'packages/**/*.js' ],
 			excludedFiles: [
-				'**/*.@(android|ios|native).js',
-				'**/benchmark/**/*.js',
-				'**/@(__mocks__|__tests__|test)/**/*.js',
-				'**/@(storybook|stories)/**/*.js',
+				'packages/block-library/src/*/save.js',
+				...developmentFiles,
 			],
+			rules: {
+				'react/forbid-elements': [ 'error', {
+					forbid: [
+						[ 'button', 'Button' ],
+						[ 'circle', 'Circle' ],
+						[ 'g', 'G' ],
+						[ 'path', 'Path' ],
+						[ 'polygon', 'Polygon' ],
+						[ 'rect', 'Rect' ],
+						[ 'svg', 'SVG' ],
+					].map( ( [ element, componentName ] ) => {
+						return {
+							element,
+							message: `use cross-platform <${ componentName } /> component instead.`,
+						};
+					} ),
+				} ],
+			},
 		},
 		{
 			files: [
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index a4af815ac3644..5aeed7b0bd00f 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -23,7 +28,7 @@ function InserterListItem( {
 
 	return (
 		<li className="editor-block-types-list__list-item block-editor-block-types-list__list-item">
-			<button
+			<Button
 				className={
 					classnames(
 						'editor-block-types-list__item block-editor-block-types-list__item',
@@ -46,7 +51,7 @@ function InserterListItem( {
 				<span className="editor-block-types-list__item-title block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</button>
+			</Button>
 		</li>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 8dc8b8084ad4f..4f384b1c77566 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -5,7 +5,7 @@
 	margin: 0 0 12px;
 }
 
-.block-editor-block-types-list__item {
+.components-button.block-editor-block-types-list__item {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -54,6 +54,7 @@
 		&:focus {
 			position: relative;
 			@include block-style__focus();
+			background: transparent;
 
 			.block-editor-block-types-list__item-icon,
 			.block-editor-block-types-list__item-title {
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
index 432b4bb3dff17..5045389816a4c 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -13,14 +13,14 @@ import TextHighlight from './text-highlight';
  */
 import { safeDecodeURI } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-
 import {
+	Button,
 	Icon,
 } from '@wordpress/components';
 
 export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
 	return (
-		<button
+		<Button
 			{ ...itemProps }
 			onClick={ onClick }
 			className={ classnames( 'block-editor-link-control__search-item', {
@@ -46,7 +46,7 @@ export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = fal
 			{ suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>
 			) }
-		</button>
+		</Button>
 	);
 };
 
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index 672baa3920fd8..a4f233d3533f9 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -18,7 +18,7 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 
 	return (
 		selectedBlockClientId &&
-		<Button isDefault type="button" className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
+		<Button isDefault className="editor-skip-to-selected-block block-editor-skip-to-selected-block" onClick={ onClick }>
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	);
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index aa56c03ee0123..1d4e3a48645b8 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
+import { BaseControl, Button, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
@@ -348,7 +348,7 @@ class URLInput extends Component {
 							) }
 						>
 							{ suggestions.map( ( suggestion, index ) => (
-								<button
+								<Button
 									{ ...buildSuggestionItemProps( suggestion, index ) }
 									key={ suggestion.id }
 									className={ classnames( 'editor-url-input__suggestion block-editor-url-input__suggestion', {
@@ -357,7 +357,7 @@ class URLInput extends Component {
 									onClick={ () => this.handleOnClick( suggestion ) }
 								>
 									{ suggestion.title }
-								</button>
+								</Button>
 							) ) }
 						</div>
 					</Popover>
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index b048722a70ecf..7c582faa63ad3 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -9,7 +9,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -154,14 +154,14 @@ class AudioEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						<IconButton
 							className="components-icon-button components-toolbar__control"
 							label={ __( 'Edit audio' ) }
 							onClick={ switchToEditing }
 							icon="edit"
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Audio Settings' ) }>
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index d64c80989d870..647c94528b974 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -14,17 +14,17 @@ import {
 	useState,
 } from '@wordpress/element';
 import {
+	BaseControl,
+	Button,
 	FocalPointPicker,
 	IconButton,
 	PanelBody,
 	PanelRow,
 	RangeControl,
+	ResizableBox,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
-	ResizableBox,
-	BaseControl,
-	Button,
 } from '@wordpress/components';
 import { compose, withInstanceId } from '@wordpress/compose';
 import {
@@ -312,7 +312,7 @@ function CoverEdit( {
 				{ hasBackground && (
 					<>
 						<MediaUploadCheck>
-							<Toolbar>
+							<ToolbarGroup>
 								<MediaUpload
 									onSelect={ onSelectMedia }
 									allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -326,7 +326,7 @@ function CoverEdit( {
 										/>
 									) }
 								/>
-							</Toolbar>
+							</ToolbarGroup>
 						</MediaUploadCheck>
 					</>
 				) }
diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
index fe115b403be22..09044b43b9abd 100644
--- a/packages/block-library/src/embed/embed-controls.js
+++ b/packages/block-library/src/embed/embed-controls.js
@@ -2,7 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar, PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	IconButton,
+	PanelBody,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 
 const EmbedControls = ( props ) => {
@@ -18,7 +23,7 @@ const EmbedControls = ( props ) => {
 	return (
 		<>
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					{ showEditButton && (
 						<IconButton
 							className="components-toolbar__control"
@@ -27,7 +32,7 @@ const EmbedControls = ( props ) => {
 							onClick={ switchBackToURLInput }
 						/>
 					) }
-				</Toolbar>
+				</ToolbarGroup>
 			</BlockControls>
 			{ themeSupportsResponsive && blockSupportsResponsive && (
 				<InspectorControls>
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index 503345f8b1407..918849fd88a34 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -15,7 +15,7 @@ import {
 	Animate,
 	ClipboardButton,
 	IconButton,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -190,7 +190,7 @@ class FileEdit extends Component {
 				/>
 				<BlockControls>
 					<MediaUploadCheck>
-						<Toolbar>
+						<ToolbarGroup>
 							<MediaUpload
 								onSelect={ this.onSelectFile }
 								value={ id }
@@ -203,7 +203,7 @@ class FileEdit extends Component {
 									/>
 								) }
 							/>
-						</Toolbar>
+						</ToolbarGroup>
 					</MediaUploadCheck>
 				</BlockControls>
 				<Animate type={ isBlobURL( href ) ? 'loading' : null }>
diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js
index 6d19cc0822f89..330712435e640 100644
--- a/packages/block-library/src/heading/heading-toolbar.js
+++ b/packages/block-library/src/heading/heading-toolbar.js
@@ -8,7 +8,7 @@ import { range } from 'lodash';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,7 +31,7 @@ class HeadingToolbar extends Component {
 		const { isCollapsed = true, minLevel, maxLevel, selectedLevel, onChange } = this.props;
 
 		return (
-			<Toolbar
+			<ToolbarGroup
 				isCollapsed={ isCollapsed }
 				icon={ <HeadingLevelIcon level={ selectedLevel } /> }
 				controls={ range( minLevel, maxLevel ).map(
diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 4f1ab45a073df..2e03b0a08886b 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -8,7 +8,12 @@ import {
 	PlainText,
 	transformStyles,
 } from '@wordpress/block-editor';
-import { Disabled, SandBox } from '@wordpress/components';
+import {
+	Button,
+	Disabled,
+	SandBox,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 class HTMLEdit extends Component {
@@ -57,20 +62,20 @@ class HTMLEdit extends Component {
 		return (
 			<div className="wp-block-html">
 				<BlockControls>
-					<div className="components-toolbar">
-						<button
+					<ToolbarGroup>
+						<Button
 							className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` }
 							onClick={ this.switchToHTML }
 						>
 							<span>HTML</span>
-						</button>
-						<button
+						</Button>
+						<Button
 							className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` }
 							onClick={ this.switchToPreview }
 						>
 							<span>{ __( 'Preview' ) }</span>
-						</button>
-					</div>
+						</Button>
+					</ToolbarGroup>
 				</BlockControls>
 				<Disabled.Consumer>
 					{ ( isDisabled ) => (
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index feb8f7113919d..f8b964e18e617 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -32,7 +32,7 @@ import {
 	TextareaControl,
 	TextControl,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -609,7 +609,7 @@ export class ImageEdit extends Component {
 				/>
 				{ url && (
 					<>
-						<Toolbar>
+						<ToolbarGroup>
 							<IconButton
 								className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
 								label={ __( 'Edit image' ) }
@@ -617,8 +617,8 @@ export class ImageEdit extends Component {
 								onClick={ this.toggleIsEditing }
 								icon={ editImageIcon }
 							/>
-						</Toolbar>
-						<Toolbar>
+						</ToolbarGroup>
+						<ToolbarGroup>
 							<ImageURLInputUI
 								url={ href || '' }
 								onChangeUrl={ this.onSetHref }
@@ -647,7 +647,7 @@ export class ImageEdit extends Component {
 									</>
 								}
 							/>
-						</Toolbar>
+						</ToolbarGroup>
 					</>
 				) }
 			</BlockControls>
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index af10c47fdfa3e..df70ef1a67148 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -16,14 +16,14 @@ import { isEmpty, map, get } from 'lodash';
  * WordPress dependencies
  */
 import {
-	TextControl,
-	ToggleControl,
-	SelectControl,
 	Icon,
-	Toolbar,
-	ToolbarButton,
 	PanelBody,
 	PanelActions,
+	SelectControl,
+	TextControl,
+	ToggleControl,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 
 import {
@@ -303,13 +303,13 @@ export class ImageEdit extends React.Component {
 
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					<ToolbarButton
 						title={ __( 'Edit image' ) }
 						icon={ editImageIcon }
 						onClick={ open }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 				<BlockAlignmentToolbar
 					value={ align }
 					onChange={ this.updateAlignment }
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 6d0e4198e8242..ba30954d26fa8 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -12,11 +12,11 @@ import {
 	PanelBody,
 	Placeholder,
 	QueryControls,
+	RadioControl,
 	RangeControl,
 	Spinner,
 	ToggleControl,
-	Toolbar,
-	RadioControl,
+	ToolbarGroup,
 } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -179,7 +179,7 @@ class LatestPostsEdit extends Component {
 			<>
 				{ inspectorControls }
 				<BlockControls>
-					<Toolbar controls={ layoutControls } />
+					<ToolbarGroup controls={ layoutControls } />
 				</BlockControls>
 				<ul
 					className={ classnames( this.props.className, {
diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js
index 3387640fefe87..caf47b96f595d 100644
--- a/packages/block-library/src/legacy-widget/edit/index.js
+++ b/packages/block-library/src/legacy-widget/edit/index.js
@@ -11,7 +11,7 @@ import {
 	Button,
 	IconButton,
 	PanelBody,
-	Toolbar,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
@@ -88,7 +88,7 @@ class LegacyWidgetEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						{ ( widgetObject && ! widgetObject.isHidden ) && (
 							<IconButton
 								onClick={ this.changeWidget }
@@ -112,7 +112,7 @@ class LegacyWidgetEdit extends Component {
 								</Button>
 							</>
 						) }
-					</Toolbar>
+					</ToolbarGroup>
 				</BlockControls>
 				{ inspectorControls }
 				{ hasEditForm && (
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index 845065a794ebe..3ca1bb26ec544 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -9,7 +9,7 @@ import {
 	RichTextShortcut,
 } from '@wordpress/block-editor';
 import {
-	Toolbar,
+	ToolbarGroup,
 } from '@wordpress/components';
 import {
 	__unstableCanIndentListItems as canIndentListItems,
@@ -68,7 +68,7 @@ export default function ListEdit( {
 				} }
 			/>
 			<BlockControls>
-				<Toolbar
+				<ToolbarGroup
 					controls={ [
 						{
 							icon: 'editor-ul',
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 89801485bcdd0..44f15a8ce00ee 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -18,12 +18,12 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import {
+	ExternalLink,
+	FocalPointPicker,
 	PanelBody,
 	TextareaControl,
 	ToggleControl,
-	Toolbar,
-	ExternalLink,
-	FocalPointPicker,
+	ToolbarGroup,
 } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -223,7 +223,7 @@ class MediaTextEdit extends Component {
 					/>
 				</InspectorControls>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ toolbarControls }
 					/>
 					<BlockVerticalAlignmentToolbar
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index f4a1cc8924a98..fb09030fca11d 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import {
-	Toolbar,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -173,7 +173,7 @@ class MediaTextEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ toolbarControls }
 					/>
 					<BlockVerticalAlignmentToolbar
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index fce35487d6a03..2d132121d4a2c 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { IconButton, ResizableBox, Toolbar, withNotices } from '@wordpress/components';
+import { IconButton, ResizableBox, ToolbarGroup, withNotices } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
@@ -48,7 +48,7 @@ class MediaContainer extends Component {
 		const { mediaId, onSelectMedia } = this.props;
 		return (
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					<MediaUpload
 						onSelect={ onSelectMedia }
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -62,7 +62,7 @@ class MediaContainer extends Component {
 							/>
 						) }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 			</BlockControls>
 		);
 	}
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index 55022b18ff8cd..8ad8304cab8fc 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -14,7 +14,7 @@ import {
 import {
 	Icon,
 	IconButton,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -109,14 +109,14 @@ class MediaContainer extends Component {
 	renderToolbarEditButton( open ) {
 		return (
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					<IconButton
 						className="components-toolbar__control"
 						label={ __( 'Edit media' ) }
 						icon="edit"
 						onClick={ open }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 			</BlockControls>
 		);
 	}
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index eb673de0292d4..58b6ba74a8e95 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -18,9 +18,9 @@ import {
 	SVG,
 	TextareaControl,
 	TextControl,
-	Toolbar,
 	ToggleControl,
 	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import {
 	LEFT,
@@ -136,7 +136,7 @@ function NavigationLinkEdit( {
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					<KeyboardShortcuts
 						bindGlobal
 						shortcuts={ {
@@ -156,7 +156,7 @@ function NavigationLinkEdit( {
 						title={ __( 'Add Submenu' ) }
 						onClick={ insertLinkBlock }
 					/>
-				</Toolbar>
+				</ToolbarGroup>
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody
diff --git a/packages/block-library/src/navigation/block-colors-selector.js b/packages/block-library/src/navigation/block-colors-selector.js
index 327fc0c938556..52605ff0512cf 100644
--- a/packages/block-library/src/navigation/block-colors-selector.js
+++ b/packages/block-library/src/navigation/block-colors-selector.js
@@ -6,7 +6,7 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton, Dropdown, Toolbar, SVG, Path } from '@wordpress/components';
+import { IconButton, Dropdown, ToolbarGroup, SVG, Path } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { ColorPaletteControl } from '@wordpress/block-editor';
@@ -52,7 +52,7 @@ const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
 	};
 
 	return (
-		<Toolbar>
+		<ToolbarGroup>
 			<IconButton
 				className="components-icon-button components-toolbar__control block-library-colors-selector__toggle"
 				label={ __( 'Open Colors Selector' ) }
@@ -60,7 +60,7 @@ const renderToggleComponent = ( { value } ) => ( { onToggle, isOpen } ) => {
 				onKeyDown={ openOnArrowDown }
 				icon={ <ColorSelectorIcon color={ value } /> }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 };
 
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
index 164fe682f601b..ab5f40cc040fa 100644
--- a/packages/block-library/src/navigation/edit.js
+++ b/packages/block-library/src/navigation/edit.js
@@ -20,12 +20,12 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import {
+	Button,
 	CheckboxControl,
 	PanelBody,
-	Spinner,
-	Toolbar,
 	Placeholder,
-	Button,
+	Spinner,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 
@@ -152,9 +152,9 @@ function Navigation( {
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar>
+				<ToolbarGroup>
 					{ navigatorToolbarButton }
-				</Toolbar>
+				</ToolbarGroup>
 				<BlockColorsStyleSelector
 					value={ TextColor.color }
 					onChange={ TextColor.setColor }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 6b61a3f354155..ffcd9d20c6cf4 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -10,7 +10,7 @@ import { __, _x } from '@wordpress/i18n';
 import {
 	PanelBody,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
@@ -50,7 +50,7 @@ function ParagraphRTLToolbar( { direction, setDirection } ) {
 	} );
 
 	return ( isRTL && (
-		<Toolbar
+		<ToolbarGroup
 			controls={ [
 				{
 					icon: 'editor-ltr',
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
index 81c6497f35252..d6e7b3299476d 100644
--- a/packages/block-library/src/rss/edit.js
+++ b/packages/block-library/src/rss/edit.js
@@ -10,7 +10,7 @@ import {
 	RangeControl,
 	TextControl,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -109,7 +109,7 @@ class RSSEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar controls={ toolbarControls } />
+					<ToolbarGroup controls={ toolbarControls } />
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'RSS Settings' ) }>
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index b2aa14dbfea7d..663f97eb3c1c1 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -18,13 +18,13 @@ import {
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
-	PanelBody,
-	ToggleControl,
-	TextControl,
 	Button,
-	Toolbar,
 	DropdownMenu,
+	PanelBody,
 	Placeholder,
+	TextControl,
+	ToggleControl,
+	ToolbarGroup,
 } from '@wordpress/components';
 
 /**
@@ -535,14 +535,14 @@ export class TableEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						<DropdownMenu
 							hasArrowIndicator
 							icon="editor-table"
 							label={ __( 'Edit table' ) }
 							controls={ this.getTableControls() }
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 					<AlignmentToolbar
 						label={ __( 'Change column alignment' ) }
 						alignmentControls={ ALIGNMENT_CONTROLS }
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 11756c8a0f901..a2b7e7cfad758 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -8,7 +8,7 @@ import {
 	Disabled,
 	IconButton,
 	PanelBody,
-	Toolbar,
+	ToolbarGroup,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -186,14 +186,14 @@ class VideoEdit extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar>
+					<ToolbarGroup>
 						<IconButton
 							className="components-icon-button components-toolbar__control"
 							label={ __( 'Edit video' ) }
 							onClick={ switchToEditing }
 							icon="edit"
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Video Settings' ) }>
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
index e49607bd8ff7e..de12486e9075d 100644
--- a/packages/block-library/src/video/edit.native.js
+++ b/packages/block-library/src/video/edit.native.js
@@ -17,8 +17,8 @@ import {
  */
 import {
 	Icon,
-	Toolbar,
 	ToolbarButton,
+	ToolbarGroup,
 	PanelBody,
 } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
@@ -169,14 +169,14 @@ class VideoEdit extends React.Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
-						<Toolbar>
+						<ToolbarGroup>
 							{ getMediaOptions() }
 							<ToolbarButton
 								label={ __( 'Edit video' ) }
 								icon="edit"
 								onClick={ open }
 							/>
-						</Toolbar>
+						</ToolbarGroup>
 					);
 				} } >
 			</MediaUpload>
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index 1d1b7635f9f58..204ebf515fa02 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -18,8 +18,7 @@ function Option( {
 	...additionalProps
 } ) {
 	const optionButton = (
-		<button
-			type="button"
+		<Button
 			aria-pressed={ isSelected }
 			className={ classnames(
 				className,
@@ -78,7 +77,6 @@ function ButtonAction( {
 				'components-circular-option-picker__clear',
 				className
 			) }
-			type="button"
 			isSmall
 			isDefault
 			{ ...additionalProps }
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index e7187ef05fcbc..ca1a02634de64 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -283,7 +283,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           <Tooltip
             text="red"
           >
-            <button
+            <ForwardRef(Button)
               aria-label="Color: red"
               aria-pressed={true}
               className="components-circular-option-picker__option is-active"
@@ -298,8 +298,25 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   "color": "#f00",
                 }
               }
-              type="button"
-            />
+            >
+              <button
+                aria-label="Color: red"
+                aria-pressed={true}
+                className="components-button components-circular-option-picker__option is-active"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "color": "#f00",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
           </Tooltip>
           <Dashicon
             icon="saved"
@@ -354,7 +371,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           <Tooltip
             text="white"
           >
-            <button
+            <ForwardRef(Button)
               aria-label="Color: white"
               aria-pressed={false}
               className="components-circular-option-picker__option"
@@ -369,8 +386,25 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   "color": "#fff",
                 }
               }
-              type="button"
-            />
+            >
+              <button
+                aria-label="Color: white"
+                aria-pressed={false}
+                className="components-button components-circular-option-picker__option"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "color": "#fff",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
           </Tooltip>
         </div>
       </Option>
@@ -392,7 +426,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           <Tooltip
             text="blue"
           >
-            <button
+            <ForwardRef(Button)
               aria-label="Color: blue"
               aria-pressed={false}
               className="components-circular-option-picker__option"
@@ -407,8 +441,25 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   "color": "#00f",
                 }
               }
-              type="button"
-            />
+            >
+              <button
+                aria-label="Color: blue"
+                aria-pressed={false}
+                className="components-button components-circular-option-picker__option"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                style={
+                  Object {
+                    "color": "#00f",
+                  }
+                }
+                type="button"
+              />
+            </ForwardRef(Button)>
           </Tooltip>
         </div>
       </Option>
@@ -465,7 +516,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             isDefault={true}
             isSmall={true}
             onClick={[Function]}
-            type="button"
           >
             <button
               className="components-button components-circular-option-picker__clear is-button is-default is-small"
diff --git a/packages/components/src/color-picker/saturation.js b/packages/components/src/color-picker/saturation.js
index ae1f80333237d..d2e495923b617 100644
--- a/packages/components/src/color-picker/saturation.js
+++ b/packages/components/src/color-picker/saturation.js
@@ -42,6 +42,7 @@ import { compose, pure, withInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import { calculateSaturationChange } from './utils';
+import Button from '../button';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import VisuallyHidden from '../visually-hidden';
 
@@ -165,7 +166,7 @@ export class Saturation extends Component {
 				>
 					<div className="components-color-picker__saturation-white" />
 					<div className="components-color-picker__saturation-black" />
-					<button
+					<Button
 						aria-label={ __( 'Choose a shade' ) }
 						aria-describedby={ `color-picker-saturation-${ instanceId }` }
 						className="components-color-picker__saturation-pointer"
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index a3713f860f3c0..317a7db3538a7 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -29,7 +29,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
         <button
           aria-describedby="color-picker-saturation-2"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -37,6 +37,7 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = `
               "top": "20%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -203,7 +204,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
         <button
           aria-describedby="color-picker-saturation-4"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -211,6 +212,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] =
               "top": "20%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -377,7 +379,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
         <button
           aria-describedby="color-picker-saturation-5"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -385,6 +387,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] =
               "top": "20%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -551,7 +554,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
         <button
           aria-describedby="color-picker-saturation-3"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -559,6 +562,7 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = `
               "top": "20%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -725,7 +729,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
         <button
           aria-describedby="color-picker-saturation-1"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -733,6 +737,7 @@ exports[`ColorPicker should only update input view for draft changes 1`] = `
               "top": "0%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -899,7 +904,7 @@ exports[`ColorPicker should render color picker 1`] = `
         <button
           aria-describedby="color-picker-saturation-0"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -907,6 +912,7 @@ exports[`ColorPicker should render color picker 1`] = `
               "top": "0%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 726812a5c4feb..6c1b2283e2dff 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -94,7 +94,6 @@ function FontSizePicker( {
 				}
 				<Button
 					className="components-color-palette__clear"
-					type="button"
 					disabled={ value === undefined }
 					onClick={ () => {
 						onChange( undefined );
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index db618a86d16d9..533e778284729 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -129,7 +129,6 @@ function Layout( { isMobileViewport } ) {
 						<div className="edit-post-toggle-publish-panel">
 							<Button
 								isDefault
-								type="button"
 								className="edit-post-toggle-publish-panel__button"
 								onClick={ togglePublishSidebar }
 								aria-expanded={ false }
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
index eca127989f2e6..e483e741490d8 100644
--- a/packages/edit-post/src/components/sidebar/post-schedule/index.js
+++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js
@@ -18,7 +18,6 @@ export function PostSchedule() {
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<>
 							<Button
-								type="button"
 								className="edit-post-post-schedule__toggle"
 								onClick={ onToggle }
 								aria-expanded={ isOpen }
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
index 4bb0b4786a64f..5bc1e4c563e66 100644
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js
@@ -17,7 +17,6 @@ export function PostVisibility() {
 						contentClassName="edit-post-post-visibility__dialog"
 						renderToggle={ ( { isOpen, onToggle } ) => (
 							<Button
-								type="button"
 								aria-expanded={ isOpen }
 								className="edit-post-post-visibility__toggle"
 								onClick={ onToggle }
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
index d069c6f10c957..4bb0ddc0c2235 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-header/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 
@@ -31,24 +32,24 @@ const SettingsHeader = ( { openDocumentSettings, openBlockSettings, sidebarName
 			{ /* Use a list so screen readers will announce how many tabs there are. */ }
 			<ul>
 				<li>
-					<button
+					<Button
 						onClick={ openDocumentSettings }
 						className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
 						aria-label={ documentAriaLabel }
 						data-label={ __( 'Document' ) }
 					>
 						{ __( 'Document' ) }
-					</button>
+					</Button>
 				</li>
 				<li>
-					<button
+					<Button
 						onClick={ openBlockSettings }
 						className={ `edit-post-sidebar__panel-tab ${ blockActiveClass }` }
 						aria-label={ blockAriaLabel }
 						data-label={ blockLabel }
 					>
 						{ blockLabel }
-					</button>
+					</Button>
 				</li>
 			</ul>
 		</SidebarHeader>
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
index 2f55d4ed7f053..cf230cc3acb9a 100644
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss
@@ -14,11 +14,12 @@
 	}
 }
 
-.edit-post-sidebar__panel-tab {
+.components-button.edit-post-sidebar__panel-tab {
 	background: transparent;
 	border: none;
 	box-shadow: none;
 	cursor: pointer;
+	display: inline-block;
 	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 400;
@@ -58,6 +59,7 @@
 	}
 
 	&:focus {
+		background-color: transparent;
 		@include square-style__focus;
 	}
 }
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
index fa05feb0a33b4..0c68a362bf9f6 100644
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ b/packages/edit-post/src/components/sidebar/style.scss
@@ -149,7 +149,8 @@
 		}
 	}
 
-	&:focus {
+	&:focus:not(:disabled) {
 		@include square-style__focus;
+		box-shadow: none;
 	}
 }
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index 18d1ffe7b242d..f3a12cd90a793 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -21,7 +21,6 @@ function ImportDropdown( { onUpload } ) {
 			contentClassName="list-reusable-blocks-import-dropdown__content"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					type="button"
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					isPrimary
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index b8a1abeec7cfd..f6a590fa2a3ff 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -797,7 +797,7 @@ exports[`Storyshots Components|ColorPalette Default 1`] = `
     <button
       aria-label="Color: red"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -818,7 +818,7 @@ exports[`Storyshots Components|ColorPalette Default 1`] = `
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -839,7 +839,7 @@ exports[`Storyshots Components|ColorPalette Default 1`] = `
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -891,7 +891,7 @@ exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
     <button
       aria-label="Color: red"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -912,7 +912,7 @@ exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -933,7 +933,7 @@ exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="components-circular-option-picker__option"
+      className="components-button components-circular-option-picker__option"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -1004,7 +1004,7 @@ exports[`Storyshots Components|ColorPicker Alpha Enabled 1`] = `
         <button
           aria-describedby="color-picker-saturation-1"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -1012,6 +1012,7 @@ exports[`Storyshots Components|ColorPicker Alpha Enabled 1`] = `
               "top": "0%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"
@@ -1215,7 +1216,7 @@ exports[`Storyshots Components|ColorPicker Default 1`] = `
         <button
           aria-describedby="color-picker-saturation-0"
           aria-label="Choose a shade"
-          className="components-color-picker__saturation-pointer"
+          className="components-button components-color-picker__saturation-pointer"
           onKeyDown={[Function]}
           style={
             Object {
@@ -1223,6 +1224,7 @@ exports[`Storyshots Components|ColorPicker Default 1`] = `
               "top": "0%",
             }
           }
+          type="button"
         />
         <div
           className="components-visually-hidden"