diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 22f479e5a5dcb..6539e5bfd1004 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 ### Internal
 
 -   `AnglePickerControl`: Set Storybook Label control type to 'text' ([#45122](https://github.com/WordPress/gutenberg/pull/45122)).
+-   `Button`: Refactor Storybook to controls and align docs ([#44105](https://github.com/WordPress/gutenberg/pull/44105)).
 
 ## 21.3.0 (2022-10-19)
 
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index 3bf23aed95d47..b8b3a7f3111d2 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -127,7 +127,6 @@ Whether the button is disabled. If `true`, this will force a `button` element to
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### href
 
@@ -135,7 +134,6 @@ If provided, renders `a` instead of `button`.
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### variant
 
@@ -143,7 +141,6 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### isDestructive
 
@@ -151,7 +148,6 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isSmall
 
@@ -159,7 +155,6 @@ Decreases the size of the button.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isPressed
 
@@ -167,7 +162,6 @@ Renders a pressed button style.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isBusy
 
@@ -175,7 +169,6 @@ Indicates activity while a action is being performed.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### focus
 
@@ -183,7 +176,6 @@ Whether the button is focused.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### target
 
@@ -205,15 +197,13 @@ If provided, renders an [Icon](/packages/components/src/icon/README.md) componen
 
 -   Type: `String|Function|WPComponent|null`
 -   Required: No
--   Default: `null`
 
 #### iconSize
 
-If provided with `icon`, sets the icon size.
+If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
 
 -   Type: `Number`
 -   Required: No
--   Default: `20 when a Dashicon is rendered, 24 for all other icons.`
 
 #### iconPosition
 
@@ -236,15 +226,13 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### tooltipPosition
 
-If provided with`showTooltip`, sets the position of the tooltip.
+If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
 
 -   Type: `String`
 -   Require: No
--   Default:`top center`
 
 #### shortcut
 
@@ -252,7 +240,6 @@ If provided with `showTooltip`, appends the Shortcut label to the tooltip conten
 
 -   Type: `String|Object`
 -   Required: No
--   Default: `undefined`
 
 #### label
 
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index f71823d073464..428d1851c6640 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { text, number, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
 import {
 	formatBold,
 	formatItalic,
-	link as linkIcon,
+	link,
 	more,
 	wordpress,
 } from '@wordpress/icons';
@@ -23,142 +18,120 @@ import Button from '../';
 export default {
 	title: 'Components/Button',
 	component: Button,
+	argTypes: {
+		label: {
+			control: { type: 'text' },
+			description:
+				'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
+		},
+		children: {
+			control: { type: 'text' },
+		},
+		href: {
+			control: { type: 'text' },
+			description: 'If provided, renders `a` instead of `button`.',
+		},
+		icon: {
+			control: { type: 'select' },
+			description:
+				'If provided, renders an `Icon` component inside the button.',
+			options: [ 'wordpress', 'link', 'more' ],
+			mapping: {
+				wordpress,
+				link,
+				more,
+			},
+		},
+		iconSize: {
+			control: { type: 'number' },
+			description: 'If provided with `icon`, sets the icon size.',
+		},
+		iconPosition: {
+			control: { type: 'select' },
+			description:
+				'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
+			options: [ 'left', 'right' ],
+			table: {
+				defaultValue: { summary: `left` },
+			},
+		},
+		isBusy: {
+			control: 'boolean',
+			description:
+				'Indicates activity while a action is being performed.',
+		},
+		isDestructive: {
+			control: 'boolean',
+			description:
+				'Renders a red text-based button style to indicate destructive behavior.',
+		},
+		isPressed: {
+			control: 'boolean',
+			description: 'Renders a pressed button style.',
+		},
+		isSmall: {
+			control: 'boolean',
+			description: 'Decreases the size of the button.',
+		},
+		disabled: {
+			control: 'boolean',
+			description:
+				'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
+		},
+		shortcut: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
+		},
+		showTooltip: {
+			control: 'boolean',
+			description:
+				'If provided, renders a `Tooltip` component for the button.',
+		},
+		tooltipPosition: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, sets the position of the tooltip.',
+		},
+		text: {
+			control: { type: 'text' },
+			description:
+				'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
+		},
+		target: {
+			control: { type: 'text' },
+			description:
+				'If provided with `href`, sets the `target` attribute to the `a`.',
+		},
+		variant: {
+			control: { type: 'select' },
+			description: "Specifies the button's style.",
+			options: [ 'primary', 'secondary', 'tertiary', 'link' ],
+		},
+		__experimentalIsFocusable: {
+			control: 'boolean',
+			description: 'Makes the button focusable even when disabled',
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Default Button' );
-
-	return <Button>{ label }</Button>;
-};
-
-export const primary = () => {
-	const label = text( 'Label', 'Primary Button' );
-
-	return <Button variant="primary">{ label }</Button>;
-};
-
-export const secondary = () => {
-	const label = text( 'Label', 'Secondary Button' );
-
-	return <Button variant="secondary">{ label }</Button>;
-};
-
-export const tertiary = () => {
-	const label = text( 'Label', 'Tertiary Button' );
-
-	return <Button variant="tertiary">{ label }</Button>;
-};
-
-export const isDestructive = () => {
-	const label = text( 'Label', 'Destructive Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
+function Template( { children, ...props } ) {
+	return <Button { ...props }>{ children }</Button>;
+}
 
-	return (
-		<Button isDestructive isSmall={ isSmall } disabled={ disabled }>
-			{ label }
-		</Button>
-	);
-};
-
-export const isPrimaryDestructive = () => {
-	const label = text( 'Label', 'Destructive Primary Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
-
-	return (
-		<Button
-			variant="primary"
-			isDestructive
-			isSmall={ isSmall }
-			disabled={ disabled }
-		>
-			{ label }
-		</Button>
-	);
-};
-
-export const small = () => {
-	const label = text( 'Label', 'Small Button' );
-
-	return <Button isSmall>{ label }</Button>;
-};
-
-export const pressed = () => {
-	const label = text( 'Label', 'Pressed Button' );
-
-	return <Button isPressed>{ label }</Button>;
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
 };
 
-export const disabled = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return <Button disabled>{ label }</Button>;
-};
-
-export const disabledFocusable = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return (
-		<Button disabled __experimentalIsFocusable>
-			{ label }
-		</Button>
-	);
-};
-
-export const link = () => {
-	const label = text( 'Label', 'Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank">
-			{ label }
-		</Button>
-	);
-};
-
-export const disabledLink = () => {
-	const label = text( 'Label', 'Disabled Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank" disabled>
-			{ label }
-		</Button>
-	);
-};
-
-export const destructiveLink = () => {
-	const label = text( 'Label', 'Destructive Link' );
-
-	return (
-		<Button isDestructive variant="link">
-			{ label }
-		</Button>
-	);
-};
-
-export const icon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return <Button icon={ wordpress } label={ label } iconSize={ size } />;
-};
-
-export const disabledFocusableIcon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return (
-		<Button
-			icon={ wordpress }
-			label={ label }
-			iconSize={ size }
-			disabled
-			__experimentalIsFocusable
-		/>
-	);
+export const Icon = Template.bind( {} );
+Icon.args = {
+	label: 'Code is poetry',
+	icon: 'wordpress',
 };
 
 export const groupedIcons = () => {
@@ -170,49 +143,7 @@ export const groupedIcons = () => {
 		<GroupContainer>
 			<Button icon={ formatBold } label="Bold" />
 			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ linkIcon } label="Link" />
+			<Button icon={ link } label="Link" />
 		</GroupContainer>
 	);
 };
-
-export const buttons = () => {
-	return (
-		<div style={ { padding: '20px' } }>
-			<h2>Small Buttons</h2>
-			<div className="story-buttons-container">
-				<Button isSmall>Button</Button>
-				<Button variant="primary" isSmall>
-					Primary Button
-				</Button>
-				<Button variant="secondary" isSmall>
-					Secondary Button
-				</Button>
-				<Button variant="tertiary" isSmall>
-					Tertiary Button
-				</Button>
-				<Button isSmall icon={ more } />
-				<Button isSmall variant="primary" icon={ more } />
-				<Button isSmall variant="secondary" icon={ more } />
-				<Button isSmall variant="tertiary" icon={ more } />
-				<Button isSmall variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-
-			<h2>Regular Buttons</h2>
-			<div className="story-buttons-container">
-				<Button>Button</Button>
-				<Button variant="primary">Primary Button</Button>
-				<Button variant="secondary">Secondary Button</Button>
-				<Button variant="tertiary">Tertiary Button</Button>
-				<Button icon={ more } />
-				<Button variant="primary" icon={ more } />
-				<Button variant="secondary" icon={ more } />
-				<Button variant="tertiary" icon={ more } />
-				<Button variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-		</div>
-	);
-};