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 ea834490fd18cf..e7187ef05fcbc2 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -106,7 +106,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   renderToggle={[Function]}
 >
   <div
-    className="components-circular-option-picker__dropdown-link-action"
+    className="components-dropdown components-circular-option-picker__dropdown-link-action"
   >
     <ForwardRef(Button)
       aria-expanded={false}
@@ -436,7 +436,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             renderToggle={[Function]}
           >
             <div
-              className="components-circular-option-picker__dropdown-link-action"
+              className="components-dropdown components-circular-option-picker__dropdown-link-action"
             >
               <ForwardRef(Button)
                 aria-expanded={false}
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 9efe547e19d807..dbd307873dfcf9 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -1,40 +1,5 @@
-.components-dropdown-menu {
-	padding: 3px;
-	display: flex;
-
-	.components-dropdown-menu__toggle {
-		width: auto;
-		margin: 0;
-		padding: 4px;
-		border: $border-width solid transparent;
-		display: flex;
-		flex-direction: row;
-
-		&.is-active,
-		&.is-active:hover {
-			box-shadow: none;
-			background-color: $dark-gray-500;
-			color: $white;
-		}
-
-		&:focus::before {
-			top: -3px;
-			right: -3px;
-			bottom: -3px;
-			left: -3px;
-		}
-
-		&:hover,
-		&:focus,
-		&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
-			@include formatting-button-style__hover();
-		}
-
-		// Add a dropdown arrow indicator.
-		.components-dropdown-menu__indicator::after {
-			@include dropdown-arrow();
-		}
-	}
+.components-dropdown-menu__indicator::after {
+	@include dropdown-arrow();
 }
 
 .components-dropdown-menu__popover .components-popover__content {
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
index 6c5cffa6e5e4b7..f809c7826121b9 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -82,7 +87,7 @@ class Dropdown extends Component {
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
 
 		return (
-			<div className={ className } ref={ this.containerRef }>
+			<div className={ classnames( 'components-dropdown', className ) } ref={ this.containerRef }>
 				{ renderToggle( args ) }
 				{ isOpen && (
 					<Popover
diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.js
new file mode 100644
index 00000000000000..ce24a8c2be6b75
--- /dev/null
+++ b/packages/components/src/dropdown/stories/index.js
@@ -0,0 +1,86 @@
+/**
+ * Internal dependencies
+ */
+import Dropdown from '../';
+import IconButton from '../../icon-button';
+import MenuGroup from '../../menu-group';
+import MenuItem from '../../menu-item';
+import DropdownMenu from '../../dropdown-menu';
+
+export default { title: 'Components|Dropdown', component: Dropdown };
+
+const DropdownAndDropdownMenuExample = () => {
+	return (
+		<>
+			<div>
+				<p>This is a DropdownMenu component:</p>
+				<DropdownMenu
+					icon="move"
+					label="Select a direction"
+					controls={ [
+						{
+							title: 'Up',
+							icon: 'arrow-up-alt',
+						},
+						{
+							title: 'Right',
+							icon: 'arrow-right-alt',
+						},
+						{
+							title: 'Down',
+							icon: 'arrow-down-alt',
+						},
+						{
+							title: 'Left',
+							icon: 'arrow-left-alt',
+						},
+					] }
+				/>
+			</div>
+			<div>
+				<p>This is an assembled Dropdown component:</p>
+				<Dropdown
+					className="my-container-class-name"
+					contentClassName="my-popover-content-classname"
+					position="bottom right"
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<IconButton
+							icon="move"
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							label="Select a direction"
+						/>
+					) }
+					renderContent={ () => (
+						<MenuGroup>
+							<MenuItem
+								icon="arrow-up-alt"
+							>
+							Up
+							</MenuItem>
+							<MenuItem
+								icon="arrow-down-alt"
+							>
+							Down
+							</MenuItem>
+							<MenuItem
+								icon="arrow-left-alt"
+							>
+							Left
+							</MenuItem>
+							<MenuItem
+								icon="arrow-right-alt"
+							>
+							Right
+							</MenuItem>
+						</MenuGroup>
+					) }
+				/>
+			</div>
+		</>
+	);
+};
+
+export const _default = () => {
+	return <DropdownAndDropdownMenuExample />;
+};
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
new file mode 100644
index 00000000000000..8aeea6338019a3
--- /dev/null
+++ b/packages/components/src/dropdown/style.scss
@@ -0,0 +1,3 @@
+.components-dropdown {
+	display: inline-block;
+}
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index bba2e5e0c5fc2f..ec1b58335fedb2 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -13,6 +13,7 @@
 @import "./disabled/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
+@import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./external-link/style.scss";
 @import "./focal-point-picker/style.scss";
diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss
index c7e64b5a04bf10..c9ad3ffd51a365 100644
--- a/packages/components/src/toolbar-button/style.scss
+++ b/packages/components/src/toolbar-button/style.scss
@@ -1,37 +1,4 @@
 .components-toolbar__control.components-button {
-	display: inline-flex;
-	align-items: flex-end;
-	margin: 0;
-	padding: 3px;
-	outline: none;
-	cursor: pointer;
-	position: relative;
-	width: $icon-button-size;
-	height: $icon-button-size;
-
-	// Unset icon button styles
-	&:not([aria-disabled="true"]):not(.is-default):active,
-	&:not([aria-disabled="true"]):hover,
-	&:not([aria-disabled="true"]):focus {
-		outline: none;
-		box-shadow: none;
-		background: none;
-		border: none;
-	}
-
-	// Disabled
-	&:disabled {
-		cursor: default;
-	}
-
-	& > svg {
-		padding: 5px;
-		border-radius: $radius-round-rectangle;
-		height: 30px;
-		width: 30px;
-		box-sizing: border-box;
-	}
-
 	// Subscript for numbered icon buttons, like headings
 	&[data-subscript] svg {
 		padding: 5px 10px 5px 0;
@@ -48,43 +15,7 @@
 		bottom: 10px;
 	}
 
-	// Assign hover style to child element, not the button itself
-	&:not(:disabled):not([aria-disabled="true"]):hover {
-		box-shadow: none;
-	}
-
-	&:not(:disabled).is-active > svg,
-	&:not(:disabled):hover > svg {
-		@include formatting-button-style__hover;
-	}
-
-	// Active & toggled style
-	&:not(:disabled).is-active > svg {
-		@include formatting-button-style__active;
-	}
-
 	&:not(:disabled).is-active[data-subscript]::after {
 		color: $white;
 	}
-
-	// Focus style
-	&:not(:disabled):focus > svg {
-		@include formatting-button-style__focus;
-		// Remove outline from SVG to apply on focused element - see below.
-		outline: 0;
-	}
-
-	// Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children.
-	&:not(:disabled).is-active {
-		outline: 1px dotted transparent;
-		outline-offset: -2px;
-	}
-	// Microsoft Edge in high contrast mode only displays outlines on focused elements, not their children.
-	&:not(:disabled):focus {
-		outline: 2px solid transparent;
-	}
-}
-
-.components-toolbar__control .dashicon {
-	display: block;
 }
diff --git a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
index 5096eaa7c803b5..e0337df629bd3a 100644
--- a/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -30,7 +30,7 @@ exports[`MoreMenu should match snapshot 1`] = `
       renderToggle={[Function]}
     >
       <div
-        className="components-dropdown-menu edit-post-more-menu"
+        className="components-dropdown components-dropdown-menu edit-post-more-menu"
       >
         <ForwardRef(IconButton)
           aria-expanded={false}