diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js
new file mode 100644
index 00000000000000..598bc420fbf950
--- /dev/null
+++ b/packages/components/src/notice/stories/index.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { boolean, select, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import Notice from '../';
+
+export default {
+	title: 'Components/Notice',
+	component: Notice,
+};
+
+export const _default = () => {
+	const status = select(
+		'Status',
+		{
+			Warning: 'warning',
+			Success: 'success',
+			Error: 'error',
+			Info: 'info',
+		},
+		'info'
+	);
+	const isDismissible = boolean( 'Is Dismissible', true );
+
+	return (
+		<Notice status={ status } isDismissible={ isDismissible }>
+			<p>This is a notice.</p>
+		</Notice>
+	);
+};
+
+export const withCustomSpokenMessage = () => {
+	const status = select(
+		'Status',
+		{
+			Warning: 'warning',
+			Success: 'success',
+			Error: 'error',
+			Info: 'info',
+		},
+		'info'
+	);
+	const isDismissible = boolean( 'Is Dismissible', true );
+	const politeness = select(
+		'Politeness',
+		{
+			Assertive: 'assertive',
+			Polite: 'polite',
+		},
+		'assertive'
+	);
+	const spokenMessage = text(
+		'Spoken Message',
+		'This is a notice with a custom spoken message'
+	);
+
+	return (
+		<Notice
+			status={ status }
+			isDismissible={ isDismissible }
+			politeness={ politeness }
+			spokenMessage={ spokenMessage }
+		>
+			<p>This is a notice.</p>
+		</Notice>
+	);
+};