diff --git a/src/components/Badge.stories.js b/src/components/Badge.stories.js
index 0b5d08a1..d07effbe 100644
--- a/src/components/Badge.stories.js
+++ b/src/components/Badge.stories.js
@@ -7,30 +7,16 @@ export default {
   component: Badge,
 };
 
-export const allBadges = () => (
+export const all = () => (
   <div>
     <Badge status="positive">Positive</Badge>
     <Badge status="negative">Negative</Badge>
     <Badge status="neutral">Neutral</Badge>
     <Badge status="error">Error</Badge>
     <Badge status="warning">Warning</Badge>
-    <Badge status="positive">
-      <Icon icon="facehappy" inline />
-      with icon
-    </Badge>
   </div>
 );
 
-allBadges.story = {
-  name: 'all badges',
-};
-
-export const positive = () => <Badge status="positive">Positive</Badge>;
-export const negative = () => <Badge status="negative">Negative</Badge>;
-export const warning = () => <Badge status="warning">Warning</Badge>;
-export const neutral = () => <Badge status="neutral">Neutral</Badge>;
-export const error = () => <Badge status="error">Error</Badge>;
-
 export const withIcon = () => (
   <Badge status="warning">
     <Icon icon="check" inline />
diff --git a/src/components/Button.stories.js b/src/components/Button.stories.js
index 1208261e..7e63edf7 100644
--- a/src/components/Button.stories.js
+++ b/src/components/Button.stories.js
@@ -23,18 +23,28 @@ export default {
   component: Button,
 };
 
-export const allButtons = () => (
-  <div>
+export const buttons = () => (
+  <>
     <Button appearance="primary">Primary</Button>
     <Button appearance="secondary">Secondary</Button>
     <Button appearance="tertiary">Tertiary</Button>
     <Button appearance="outline">Outline</Button>
     <Button appearance="primaryOutline">Outline primary</Button>
     <Button appearance="secondaryOutline">Outline secondary</Button>
-    <Button appearance="primary" isDisabled>
-      Disabled
+  </>
+);
+
+export const sizes = () => (
+  <>
+    <Button appearance="primary">Default</Button>
+    <Button appearance="primary" size="small">
+      Small
     </Button>
-    <br />
+  </>
+);
+
+export const loading = () => (
+  <>
     <Button appearance="primary" isLoading>
       Primary
     </Button>
@@ -50,99 +60,43 @@ export const allButtons = () => (
     <Button appearance="outline" isLoading loadingText="Custom...">
       Outline
     </Button>
-    <br />
-    <Button appearance="primary" size="small">
+  </>
+);
+
+export const disabled = () => (
+  <>
+    <Button appearance="primary" isDisabled>
       Primary
     </Button>
-    <Button appearance="secondary" size="small">
+    <Button appearance="secondary" isDisabled>
       Secondary
     </Button>
-    <Button appearance="tertiary" size="small">
+    <Button appearance="tertiary" isDisabled>
       Tertiary
     </Button>
-    <Button appearance="outline" size="small">
+    <Button appearance="outline" isDisabled>
       Outline
     </Button>
-    <Button appearance="primary" isDisabled size="small">
-      Disabled
+  </>
+);
+
+export const containsIcon = () => (
+  <>
+    <Button appearance="outline" containsIcon>
+      <Icon icon="link" aria-label="Link" />
     </Button>
     <Button appearance="outline" size="small" containsIcon>
       <Icon icon="link" aria-label="Link" />
     </Button>
-    <Button appearance="outline" size="small">
-      <Icon icon="link" />
-      Link
-    </Button>
-  </div>
+  </>
 );
 
-allButtons.story = {
-  name: 'all buttons',
-};
-
 export const buttonWrapper = () => (
   <div>
     <ButtonWrapper>Original Button Wrapper</ButtonWrapper>
     <br />
     <Button ButtonWrapper={ButtonWrapper} appearance="primary">
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline">
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primaryOutline">
-      Outline primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondaryOutline">
-      Outline secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" isDisabled>
-      Disabled
-    </Button>
-    <br />
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" isLoading>
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" isLoading>
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" isLoading>
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" isLoading>
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" isLoading loadingText="Custom...">
-      Outline
-    </Button>
-    <br />
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" size="small">
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" size="small">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" size="small">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" isDisabled size="small">
-      Disabled
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small" containsIcon>
-      <Icon icon="link" aria-label="Link" />
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
-      <Icon icon="link" />
-      Link
+      Button that passes clicks through
     </Button>
   </div>
 );
@@ -156,140 +110,7 @@ export const anchorWrapper = () => (
     <StoryLinkWrapper to="http://storybook.js.org">Original Link Wrapper</StoryLinkWrapper>
     <br />
     <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" href="http://storybook.js.org">
-      Primary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary" href="http://storybook.js.org">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" href="http://storybook.js.org">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" href="http://storybook.js.org">
-      Outline
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="primaryOutline"
-      href="http://storybook.js.org"
-    >
-      Outline primary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="secondaryOutline"
-      href="http://storybook.js.org"
-    >
-      Outline secondary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="primary"
-      isDisabled
-      href="http://storybook.js.org"
-    >
-      Disabled
-    </Button>
-    <br />
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="primary"
-      isLoading
-      href="http://storybook.js.org"
-    >
-      Primary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="secondary"
-      isLoading
-      href="http://storybook.js.org"
-    >
-      Secondary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="tertiary"
-      isLoading
-      href="http://storybook.js.org"
-    >
-      Tertiary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="outline"
-      isLoading
-      href="http://storybook.js.org"
-    >
-      Outline
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="outline"
-      isLoading
-      loadingText="Custom..."
-      href="http://storybook.js.org"
-    >
-      Outline
-    </Button>
-    <br />
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="primary"
-      size="small"
-      href="http://storybook.js.org"
-    >
-      Primary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="secondary"
-      size="small"
-      href="http://storybook.js.org"
-    >
-      Secondary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="tertiary"
-      size="small"
-      href="http://storybook.js.org"
-    >
-      Tertiary
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="outline"
-      size="small"
-      href="http://storybook.js.org"
-    >
-      Outline
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="primary"
-      isDisabled
-      size="small"
-      href="http://storybook.js.org"
-    >
-      Disabled
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="outline"
-      size="small"
-      containsIcon
-      href="http://storybook.js.org"
-    >
-      <Icon icon="link" aria-label="Link" />
-    </Button>
-    <Button
-      ButtonWrapper={StoryLinkWrapper}
-      appearance="outline"
-      size="small"
-      href="http://storybook.js.org"
-    >
-      <Icon icon="link" />
-      Link
+      Button that passes href through
     </Button>
   </div>
 );
diff --git a/src/components/Icon.stories.js b/src/components/Icon.stories.js
index 64e4c1be..c86935ef 100644
--- a/src/components/Icon.stories.js
+++ b/src/components/Icon.stories.js
@@ -77,10 +77,6 @@ export const noLabels = () => (
   </List>
 );
 
-noLabels.story = {
-  name: 'no labels',
-};
-
 export const inline = () => (
   <Fragment>
     this is an inline <Icon icon="facehappy" aria-label="Happy face" /> icon (default)
diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js
index 708a8a4f..66a52e0a 100644
--- a/src/components/Link.stories.js
+++ b/src/components/Link.stories.js
@@ -20,46 +20,54 @@ export default {
 };
 
 export const all = () => (
-  <div>
-    <Link href="https://learnstorybook.com">Default</Link>
-    <br />
+  <>
+    <Link href="https://learnstorybook.com">default</Link>{' '}
     <Link secondary href="https://learnstorybook.com">
-      Secondary
-    </Link>
-    <br />
+      secondary
+    </Link>{' '}
     <Link tertiary href="https://learnstorybook.com">
       tertiary
-    </Link>
-    <br />
+    </Link>{' '}
     <Link nochrome href="https://learnstorybook.com">
       nochrome
-    </Link>
-    <br />
-    <Link href="https://learnstorybook.com">
-      <Icon icon="discord" aria-hidden />
-      With icon in front
-    </Link>
-    <br />
-    <Link containsIcon href="https://learnstorybook.com" aria-label="Toggle side bar">
-      <Icon icon="sidebar" aria-hidden />
-    </Link>
-    <br />
-    <Link containsIcon withArrow href="https://learnstorybook.com">
-      With arrow behind
-    </Link>
-    <br />
+    </Link>{' '}
     <span style={{ background: '#333' }}>
       <Link inverse href="https://learnstorybook.com">
-        Inverted colors
+        inverse
       </Link>
     </span>
-    <br />
+  </>
+);
+
+export const withArrow = () => (
+  <Link containsIcon withArrow href="https://learnstorybook.com">
+    withArrow shows an arrow behind the link
+  </Link>
+);
+
+export const containsIcon = () => (
+  <Link containsIcon href="https://learnstorybook.com" aria-label="Toggle side bar">
+    <Icon icon="sidebar" aria-hidden />
+  </Link>
+);
+
+export const icon = () => (
+  <Link href="https://learnstorybook.com">
+    <Icon icon="discord" aria-hidden />
+    Link with an icon in front
+  </Link>
+);
+
+export const isButton = () => (
+  /* eslint-disable-next-line */
+  <Link isButton onClick={onLinkClick}>
+    is actually a button
+  </Link>
+);
+
+export const hasLinkWrapper = () => (
+  <>
     {/* gatsby and styled-components don't work nicely together  */}
-    {/* eslint-disable-next-line */}
-    <Link isButton onClick={onLinkClick}>
-      is actually a button
-    </Link>
-    <br />
     <Link tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
       has a LinkWrapper like GatsbyLink or NextLink
     </Link>
@@ -67,5 +75,5 @@ export const all = () => (
     <CustomLink tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
       has a LinkWrapper like GatsbyLink or NextLink with custom styling
     </CustomLink>
-  </div>
+  </>
 );