diff --git a/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js b/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js
index cde41137543..2a8c1ac496c 100644
--- a/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js
+++ b/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import ProductControl from '@woocommerce/editor-components/product-control';
-import { Placeholder, Button, Toolbar } from '@wordpress/components';
+import { Placeholder, Button, ToolbarGroup } from '@wordpress/components';
 import { BlockControls } from '@wordpress/block-editor';
 import TextToolbarButton from '@woocommerce/editor-components/text-toolbar-button';
 import { useProductDataContext } from '@woocommerce/shared-context';
@@ -55,7 +55,7 @@ const withProductSelector = ( selectorArgs ) => ( OriginalComponent ) => {
 								} }
 							/>
 							<Button
-								isDefault
+								isSecondary
 								disabled={ ! productId }
 								onClick={ () => {
 									setIsEditing( false );
@@ -68,7 +68,7 @@ const withProductSelector = ( selectorArgs ) => ( OriginalComponent ) => {
 				) : (
 					<>
 						<BlockControls>
-							<Toolbar>
+							<ToolbarGroup>
 								<TextToolbarButton
 									onClick={ () => setIsEditing( true ) }
 								>
@@ -77,7 +77,7 @@ const withProductSelector = ( selectorArgs ) => ( OriginalComponent ) => {
 										'woo-gutenberg-products-block'
 									) }
 								</TextToolbarButton>
-							</Toolbar>
+							</ToolbarGroup>
 						</BlockControls>
 						<OriginalComponent { ...props } />
 					</>
diff --git a/assets/js/base/components/payment-methods/no-payment-methods/index.js b/assets/js/base/components/payment-methods/no-payment-methods/index.js
index b4b867c0561..348dc67e3af 100644
--- a/assets/js/base/components/payment-methods/no-payment-methods/index.js
+++ b/assets/js/base/components/payment-methods/no-payment-methods/index.js
@@ -43,7 +43,7 @@ const NoPaymentMethodsPlaceholder = () => {
 				) }
 			</span>
 			<Button
-				isDefault
+				isSecondary
 				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=checkout` }
 				target="_blank"
 				rel="noopener noreferrer"
diff --git a/assets/js/blocks/attribute-filter/edit.js b/assets/js/blocks/attribute-filter/edit.js
index 3901310afa6..ac04cb0ca4f 100644
--- a/assets/js/blocks/attribute-filter/edit.js
+++ b/assets/js/blocks/attribute-filter/edit.js
@@ -10,7 +10,7 @@ import {
 	PanelBody,
 	ToggleControl,
 	Button,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import { Icon, server, external } from '@woocommerce/icons';
@@ -48,7 +48,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	const getBlockControls = () => {
 		return (
 			<BlockControls>
-				<Toolbar
+				<ToolbarGroup
 					controls={ [
 						{
 							icon: 'edit',
@@ -238,7 +238,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			</p>
 			<Button
 				className="wc-block-attribute-filter__add-attribute-button"
-				isDefault
+				isSecondary
 				href={ getAdminLink(
 					'edit.php?post_type=product&page=product_attributes'
 				) }
diff --git a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
index a38b7bcbf49..8eac3f05269 100644
--- a/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
+++ b/assets/js/blocks/cart-checkout/checkout/form/no-shipping-placeholder/index.js
@@ -25,7 +25,7 @@ const NoShippingPlaceholder = () => {
 				) }
 			</span>
 			<Button
-				isDefault
+				isSecondary
 				href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
 				target="_blank"
 				rel="noopener noreferrer"
diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
index c98f97bf0ab..37bb5a1f13b 100644
--- a/assets/js/blocks/featured-category/block.js
+++ b/assets/js/blocks/featured-category/block.js
@@ -22,7 +22,7 @@ import {
 	ResizableBox,
 	Spinner,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import classnames from 'classnames';
@@ -93,7 +93,7 @@ const FeaturedCategory = ( {
 					} }
 				/>
 				<MediaUploadCheck>
-					<Toolbar>
+					<ToolbarGroup>
 						<MediaUpload
 							onSelect={ ( media ) => {
 								setAttributes( {
@@ -113,7 +113,7 @@ const FeaturedCategory = ( {
 								/>
 							) }
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 				</MediaUploadCheck>
 			</BlockControls>
 		);
diff --git a/assets/js/blocks/featured-product/block.js b/assets/js/blocks/featured-product/block.js
index 3f7611a547b..cd156980b2b 100644
--- a/assets/js/blocks/featured-product/block.js
+++ b/assets/js/blocks/featured-product/block.js
@@ -23,7 +23,7 @@ import {
 	ResizableBox,
 	Spinner,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import classnames from 'classnames';
@@ -146,7 +146,7 @@ const FeaturedProduct = ( {
 					} }
 				/>
 				<MediaUploadCheck>
-					<Toolbar>
+					<ToolbarGroup>
 						<MediaUpload
 							onSelect={ ( media ) => {
 								setAttributes( {
@@ -166,9 +166,9 @@ const FeaturedProduct = ( {
 								/>
 							) }
 						/>
-					</Toolbar>
+					</ToolbarGroup>
 				</MediaUploadCheck>
-				<Toolbar
+				<ToolbarGroup
 					controls={ [
 						{
 							icon: 'edit',
diff --git a/assets/js/blocks/handpicked-products/block.js b/assets/js/blocks/handpicked-products/block.js
index edcc38db36c..c936e03fe43 100644
--- a/assets/js/blocks/handpicked-products/block.js
+++ b/assets/js/blocks/handpicked-products/block.js
@@ -10,7 +10,7 @@ import {
 	PanelBody,
 	Placeholder,
 	RangeControl,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 	ToggleControl,
 } from '@wordpress/components';
@@ -164,7 +164,7 @@ class ProductsBlock extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ [
 							{
 								icon: 'edit',
diff --git a/assets/js/blocks/price-filter/edit.js b/assets/js/blocks/price-filter/edit.js
index 6273918527d..1e7071e928a 100644
--- a/assets/js/blocks/price-filter/edit.js
+++ b/assets/js/blocks/price-filter/edit.js
@@ -133,7 +133,7 @@ export default function ( { attributes, setAttributes } ) {
 			</p>
 			<Button
 				className="wc-block-price-slider__add-product-button"
-				isDefault
+				isSecondary
 				href={ getAdminLink( 'post-new.php?post_type=product' ) }
 			>
 				{ __( 'Add new product', 'woo-gutenberg-products-block' ) +
diff --git a/assets/js/blocks/product-category/block.js b/assets/js/blocks/product-category/block.js
index c8e9a412ad5..26452168ed4 100644
--- a/assets/js/blocks/product-category/block.js
+++ b/assets/js/blocks/product-category/block.js
@@ -9,7 +9,7 @@ import {
 	Disabled,
 	PanelBody,
 	Placeholder,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
@@ -281,7 +281,7 @@ class ProductByCategoryBlock extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ [
 							{
 								icon: 'edit',
diff --git a/assets/js/blocks/product-tag/block.js b/assets/js/blocks/product-tag/block.js
index 79fa3b4b1d3..d2c6c2ef78d 100644
--- a/assets/js/blocks/product-tag/block.js
+++ b/assets/js/blocks/product-tag/block.js
@@ -9,7 +9,7 @@ import {
 	Disabled,
 	PanelBody,
 	Placeholder,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
@@ -263,7 +263,7 @@ class ProductsByTagBlock extends Component {
 		return HAS_TAGS ? (
 			<>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ [
 							{
 								icon: 'edit',
diff --git a/assets/js/blocks/products-by-attribute/block.js b/assets/js/blocks/products-by-attribute/block.js
index e33e47356dd..4721a67829d 100644
--- a/assets/js/blocks/products-by-attribute/block.js
+++ b/assets/js/blocks/products-by-attribute/block.js
@@ -9,7 +9,7 @@ import {
 	Disabled,
 	PanelBody,
 	Placeholder,
-	Toolbar,
+	ToolbarGroup,
 	withSpokenMessages,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
@@ -164,7 +164,7 @@ class ProductsByAttributeBlock extends Component {
 		return (
 			<>
 				<BlockControls>
-					<Toolbar
+					<ToolbarGroup
 						controls={ [
 							{
 								icon: 'edit',
diff --git a/assets/js/blocks/products/all-products/edit.js b/assets/js/blocks/products/all-products/edit.js
index 0458a4da568..73ecfe777eb 100644
--- a/assets/js/blocks/products/all-products/edit.js
+++ b/assets/js/blocks/products/all-products/edit.js
@@ -14,7 +14,7 @@ import {
 	withSpokenMessages,
 	Placeholder,
 	Button,
-	Toolbar,
+	ToolbarGroup,
 	Disabled,
 	Tip,
 } from '@wordpress/components';
@@ -139,7 +139,7 @@ class Editor extends Component {
 
 		return (
 			<BlockControls>
-				<Toolbar
+				<ToolbarGroup
 					controls={ [
 						{
 							icon: 'edit',
diff --git a/assets/js/blocks/products/utils.js b/assets/js/blocks/products/utils.js
index 9cfd3199c04..3a952dd803e 100644
--- a/assets/js/blocks/products/utils.js
+++ b/assets/js/blocks/products/utils.js
@@ -33,7 +33,7 @@ export const renderNoProductsPlaceholder = ( blockTitle, blockIcon ) => (
 		</p>
 		<Button
 			className="wc-block-products__add-product-button"
-			isDefault
+			isSecondary
 			href={ ADMIN_URL + 'post-new.php?post_type=product' }
 		>
 			{ __( 'Add new product', 'woo-gutenberg-products-block' ) + ' ' }
diff --git a/assets/js/blocks/reviews/edit-utils.js b/assets/js/blocks/reviews/edit-utils.js
index 712f3eef607..eadd6c9eee6 100644
--- a/assets/js/blocks/reviews/edit-utils.js
+++ b/assets/js/blocks/reviews/edit-utils.js
@@ -6,7 +6,7 @@ import { createInterpolateElement } from 'wordpress-element';
 import {
 	Notice,
 	ToggleControl,
-	Toolbar,
+	ToolbarGroup,
 	RangeControl,
 	SelectControl,
 } from '@wordpress/components';
@@ -20,7 +20,7 @@ import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-co
 
 export const getBlockControls = ( editMode, setAttributes ) => (
 	<BlockControls>
-		<Toolbar
+		<ToolbarGroup
 			controls={ [
 				{
 					icon: 'edit',
diff --git a/assets/js/blocks/single-product/edit/editor-block-controls.js b/assets/js/blocks/single-product/edit/editor-block-controls.js
index f154d164221..545e0b2e5fb 100644
--- a/assets/js/blocks/single-product/edit/editor-block-controls.js
+++ b/assets/js/blocks/single-product/edit/editor-block-controls.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { BlockControls } from '@wordpress/block-editor';
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 
 /**
  * Adds controls to the editor toolbar.
@@ -15,7 +15,7 @@ import { Toolbar } from '@wordpress/components';
 const EditorBlockControls = ( { isEditing, setIsEditing } ) => {
 	return (
 		<BlockControls>
-			<Toolbar
+			<ToolbarGroup
 				controls={ [
 					{
 						icon: 'edit',
diff --git a/assets/js/blocks/single-product/edit/index.js b/assets/js/blocks/single-product/edit/index.js
index ca15fe284b8..c7e88e4c46e 100644
--- a/assets/js/blocks/single-product/edit/index.js
+++ b/assets/js/blocks/single-product/edit/index.js
@@ -85,7 +85,7 @@ const Editor = ( {
 								setAttributes={ setAttributes }
 							/>
 							<Button
-								isDefault
+								isSecondary
 								onClick={ () => {
 									setIsEditing( false );
 								} }
diff --git a/assets/js/editor-components/error-placeholder/index.js b/assets/js/editor-components/error-placeholder/index.js
index 9564e0db3c2..dc630caae7c 100644
--- a/assets/js/editor-components/error-placeholder/index.js
+++ b/assets/js/editor-components/error-placeholder/index.js
@@ -28,7 +28,7 @@ const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => (
 				{ isLoading ? (
 					<Spinner />
 				) : (
-					<Button isDefault onClick={ onRetry }>
+					<Button isSecondary onClick={ onRetry }>
 						{ __( 'Retry', 'woo-gutenberg-products-block' ) }
 					</Button>
 				) }
diff --git a/assets/js/editor-components/heading-toolbar/index.js b/assets/js/editor-components/heading-toolbar/index.js
index b06ff970a60..3f4953d768a 100644
--- a/assets/js/editor-components/heading-toolbar/index.js
+++ b/assets/js/editor-components/heading-toolbar/index.js
@@ -4,7 +4,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
@@ -38,7 +38,7 @@ class HeadingToolbar extends Component {
 		} = this.props;
 
 		return (
-			<Toolbar
+			<ToolbarGroup
 				isCollapsed={ isCollapsed }
 				icon={ <HeadingLevelIcon level={ selectedLevel } /> }
 				controls={ range( minLevel, maxLevel ).map( ( index ) =>
diff --git a/assets/js/editor-components/toggle-button-control/index.js b/assets/js/editor-components/toggle-button-control/index.js
index 50e23688105..edeb4f0b558 100644
--- a/assets/js/editor-components/toggle-button-control/index.js
+++ b/assets/js/editor-components/toggle-button-control/index.js
@@ -68,7 +68,7 @@ class ToggleButtonControl extends Component {
 							buttonArgs.isPrimary = true;
 							buttonArgs[ 'aria-pressed' ] = true;
 						} else {
-							buttonArgs.isDefault = true;
+							buttonArgs.isSecondary = true;
 							buttonArgs[ 'aria-pressed' ] = false;
 						}