diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..e5a73da3e
Binary files /dev/null and b/.DS_Store differ
diff --git a/packages/.DS_Store b/packages/.DS_Store
new file mode 100644
index 000000000..6ce06acdf
Binary files /dev/null and b/packages/.DS_Store differ
diff --git a/packages/semantic-ui/src/components/CancelButton.js b/packages/semantic-ui/src/components/CancelButton.js
index 8f6f86ce8..7cb38c0b1 100644
--- a/packages/semantic-ui/src/components/CancelButton.js
+++ b/packages/semantic-ui/src/components/CancelButton.js
@@ -6,9 +6,13 @@ import i18n from '../i18n/i18n';
 
 type Props = {
   disabled: boolean,
-  onClick: () => void
+  onClick: () => void,
 };
 
+/**
+ * A simple Cancel button component that accepts an onClick method.
+ */
+
 const CancelButton = (props: Props) => (
   <Button
     basic
diff --git a/packages/storybook/src/semantic-ui/CancelButton.stories.js b/packages/storybook/src/semantic-ui/CancelButton.stories.js
new file mode 100644
index 000000000..b972ddd75
--- /dev/null
+++ b/packages/storybook/src/semantic-ui/CancelButton.stories.js
@@ -0,0 +1,26 @@
+// @flow
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import CancelButton from '../../../semantic-ui/src/components/CancelButton';
+
+export default {
+  title: 'Components/Semantic UI/CancelButton',
+  decorators: [withKnobs],
+  component: CancelButton,
+};
+
+export const Default = () => (
+  <CancelButton
+    disabled={boolean('Disabled', false)}
+    onClick={action('click')}
+  />
+);
+
+export const Disabled = () => (
+  <CancelButton
+    disabled={boolean('Disabled', true)}
+    onClick={action('click')}
+  />
+);