diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx
index c88c9d550..c9d91be41 100644
--- a/src/Button/Button.mdx
+++ b/src/Button/Button.mdx
@@ -6,15 +6,14 @@ menu: Components
 
 import { Playground, PropsTable } from 'docz';
 import Button from './index';
-import Buttons from './Buttons';
 import { Button as ButtonProps } from './Button';
 import Group from '../Group';
 
-# Buttons
+# Button
 
 ## Import
 
-`import { Button, Buttons } from 'fannypack'`
+`import { Button } from 'fannypack'`
 
 ## Basic Usage
 
@@ -28,10 +27,10 @@ Button, by default, renders a `<button>` element.
 However, you are able to change it to a custom element using the `as` prop. See more [here](https://reakit.io/components/button).
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Default</Button>
     <Button as="a" href="#">Anchor</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Colors
@@ -39,14 +38,14 @@ However, you are able to change it to a custom element using the `as` prop. See
 Colors can be added to a button with the `palette` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Default</Button>
     <Button palette="primary">Primary</Button>
     <Button palette="secondary">Secondary</Button>
     <Button palette="success">Success</Button>
     <Button palette="danger">Danger</Button>
     <Button palette="warning">Warning</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Loading
@@ -54,12 +53,12 @@ Colors can be added to a button with the `palette` prop.
 To indicate a button is loading, use the `isLoading` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button isLoading>Default</Button>
     <Button palette="primary" isLoading>Primary</Button>
     <Button palette="primary" isLoading type="link">Primary</Button>
     <Button palette="success" isLoading type="outlined">Success</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Outlines
@@ -67,11 +66,11 @@ To indicate a button is loading, use the `isLoading` prop.
 An outline can be placed on a button by assigning `"outlined"` to the `type` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button palette="primary" type="outlined">Primary</Button>
     <Button palette="success" type="outlined">Success</Button>
     <Button palette="danger" type="outlined">Danger</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Sizes
@@ -79,12 +78,12 @@ An outline can be placed on a button by assigning `"outlined"` to the `type` pro
 Buttons are available in four different sizes and can be added with a `size` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button size="small">Small</Button>
     <Button>Default</Button>
     <Button size="medium">Medium</Button>
     <Button size="large">Large</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Links
@@ -109,24 +108,24 @@ To make a button non-interactable, add the `isStatic` prop.
 To indicate a button as disabled, use the `disabled` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button disabled>Default</Button>
     <Button palette="primary" disabled>Primary</Button>
     <Button palette="success" disabled>Success</Button>
     <Button palette="danger" disabled>Danger</Button>
     <Button palette="warning" disabled>Warning</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
-## Lists
+## Sets
 
-To display a list of buttons, use the `<Buttons>` component.
+To display a set of buttons, use the [`<Set>` component](/components/set).
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Previous</Button>
     <Button>Next</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Group
@@ -150,10 +149,6 @@ To group a set of buttons together, use the `<Group>` component.
 
 <PropsTable of={ButtonProps} />
 
-## `<Buttons>` Props
-
-<PropsTable of={Buttons} />
-
 ## Theming
 
 ### Schema
diff --git a/src/Button/Buttons.js b/src/Button/Buttons.js
deleted file mode 100644
index 3dba17f32..000000000
--- a/src/Button/Buttons.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-import React, { type Node } from 'react';
-
-import { Buttons as _Buttons } from './styled';
-
-type Props = {
-  children: Node,
-  className?: string
-};
-
-const Buttons = ({ children, ...props }: Props) => <_Buttons {...props}>{children}</_Buttons>;
-
-Buttons.defaultProps = {
-  className: null
-};
-
-export default Buttons;
diff --git a/src/Button/__tests__/Button.test.js b/src/Button/__tests__/Button.test.js
index ff8729d56..e34cc8edf 100644
--- a/src/Button/__tests__/Button.test.js
+++ b/src/Button/__tests__/Button.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import render from '../../_utils/tests/render';
 import Button from '../Button';
-import Buttons from '../Buttons';
+import Set from '../../Set';
 import Group from '../../Group';
 import 'jest-styled-components';
 
@@ -73,11 +73,11 @@ it('renders correctly for a disabled button', () => {
 
 it('renders correctly for a list of buttons', () => {
   const { container } = render(
-    <Buttons>
+    <Set>
       <Button>Test</Button>
       <Button>Test 2</Button>
       <Button>Test 3</Button>
-    </Buttons>
+    </Set>
   );
   expect(container.firstChild).toMatchSnapshot();
 });
diff --git a/src/Button/__tests__/__snapshots__/Button.test.js.snap b/src/Button/__tests__/__snapshots__/Button.test.js.snap
index 698f2a662..4565415bc 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -1101,7 +1101,7 @@ exports[`renders correctly for a list of buttons 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1146,7 +1146,7 @@ exports[`renders correctly for a list of buttons 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1171,32 +1171,28 @@ exports[`renders correctly for a list of buttons 1`] = `
   text-decoration: none;
 }
 
-.c5:focus {
+.c4:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c5[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #efefef;
 }
 
-.c5:hover:active {
+.c4:hover:active {
   background-color: #e3e3e3;
 }
 
 .c2 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -1204,14 +1200,13 @@ exports[`renders correctly for a list of buttons 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
 }
 
-.c2 > .c4:not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.c2 > .c4 {
-  margin-bottom: 0.5rem;
+.c2 > * {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 <div
@@ -1219,9 +1214,10 @@ exports[`renders correctly for a list of buttons 1`] = `
 >
   <div
     class="c2 c3 c1"
+    spacing="xxsmall"
   >
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1230,7 +1226,7 @@ exports[`renders correctly for a list of buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1239,7 +1235,7 @@ exports[`renders correctly for a list of buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1568,7 +1564,7 @@ exports[`renders correctly for grouped buttons 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1606,7 +1602,7 @@ exports[`renders correctly for grouped buttons 1`] = `
   outline-offset: 2px;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1631,35 +1627,27 @@ exports[`renders correctly for grouped buttons 1`] = `
   text-decoration: none;
 }
 
-.c5:focus {
+.c4:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c5[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #efefef;
 }
 
-.c5:hover:active {
+.c4:hover:active {
   background-color: #e3e3e3;
 }
 
-.c7 > .c4:not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.c7 > .c4 {
-  margin-bottom: 0.5rem;
-}
-
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1724,7 +1712,7 @@ exports[`renders correctly for grouped buttons 1`] = `
     role="group"
   >
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1733,7 +1721,7 @@ exports[`renders correctly for grouped buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1742,7 +1730,7 @@ exports[`renders correctly for grouped buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
diff --git a/src/Button/index.js b/src/Button/index.js
index b56fa0f54..71957b0f3 100644
--- a/src/Button/index.js
+++ b/src/Button/index.js
@@ -1,3 +1,2 @@
 export { default } from './Button';
 export { default as Button } from './Button';
-export { default as Buttons } from './Buttons';
diff --git a/src/Button/styled.js b/src/Button/styled.js
index 1c3ff5cbc..84ae95f7a 100644
--- a/src/Button/styled.js
+++ b/src/Button/styled.js
@@ -4,7 +4,6 @@ import { palette, theme } from 'styled-tools';
 import { darken } from 'polished';
 import _Button from 'reakit/Button';
 import styled from 'reakit/styled';
-import { Flex } from '../primitives';
 
 const sizeProperties = {
   small: css`
@@ -163,21 +162,4 @@ const Button = styled(_Button)`
   }
 `;
 
-export const Buttons = styled(Flex)`
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  & > ${Button}:not(:last-child) {
-    margin-right: ${theme('fannypack.layout.spacing.xxsmall')}rem;
-  }
-  & > ${Button} {
-    margin-bottom: ${theme('fannypack.layout.spacing.xxsmall')}rem;
-  }
-
-  & {
-    ${theme('fannypack.Buttons.base')};
-  }
-`;
-
 export default Button;
diff --git a/src/Pane/__tests__/Pane.test.js b/src/Pane/__tests__/Pane.test.js
new file mode 100644
index 000000000..441f64b21
--- /dev/null
+++ b/src/Pane/__tests__/Pane.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import Pane from '../Pane';
+import 'jest-styled-components';
+
+it('renders correctly for a basic pane', () => {
+  const { container } = render(<Pane>test</Pane>);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a pane with a border', () => {
+  const { container } = render(<Pane border>test</Pane>);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a pane with a shadow', () => {
+  const { container } = render(<Pane border="shadow">test</Pane>);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a full width pane', () => {
+  const { container } = render(<Pane isFullWidth>test</Pane>);
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Pane/__tests__/__snapshots__/Pane.test.js.snap b/src/Pane/__tests__/__snapshots__/Pane.test.js.snap
new file mode 100644
index 000000000..c28e94ed6
--- /dev/null
+++ b/src/Pane/__tests__/__snapshots__/Pane.test.js.snap
@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly for a basic pane 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: 3px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c1"
+  >
+    test
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a full width pane 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: 3px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c1"
+  >
+    test
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a pane with a border 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: 3px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  border: 1px solid #e6e6e6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c1"
+  >
+    test
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a pane with a shadow 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border-radius: 3px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  box-shadow: 0px 2px 4px 0px #e6e6e6,0px 0px 0px 1px #e6e6e6;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c1"
+  >
+    test
+  </div>
+</div>
+`;
diff --git a/src/Pane/styled.js b/src/Pane/styled.js
index 26b93535b..458bce586 100644
--- a/src/Pane/styled.js
+++ b/src/Pane/styled.js
@@ -29,7 +29,6 @@ const Pane = styled(Box)`
     props.isFullWidth &&
     css`
       width: 100%;
-      margin-right: 0px !important;
     `};
 
   & {
diff --git a/src/Set/Set.js b/src/Set/Set.js
new file mode 100644
index 000000000..b7b4fd961
--- /dev/null
+++ b/src/Set/Set.js
@@ -0,0 +1,20 @@
+// @flow
+import React, { type Node } from 'react';
+
+import _Set from './styled';
+
+type Props = {
+  className?: string,
+  children?: Node,
+  spacing?: boolean
+};
+
+const Set = ({ children, ...props }: Props) => <_Set {...props}>{children}</_Set>;
+
+Set.defaultProps = {
+  className: undefined,
+  children: undefined,
+  spacing: 'xxsmall'
+};
+
+export default Set;
diff --git a/src/Set/Set.mdx b/src/Set/Set.mdx
new file mode 100644
index 000000000..e1838cb69
--- /dev/null
+++ b/src/Set/Set.mdx
@@ -0,0 +1,79 @@
+---
+name: Set
+route: /components/Set
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import Set from '../Set';
+import Button from '../Button';
+import Tag from '../Tag';
+
+# Set
+
+## Import
+
+`import { Set } from 'fannypack'`
+
+## Basic Usage
+
+A `<Set>` can be used to list a set of components. It will automatically space out the components, and wrap them when they reach the width of the viewport.
+
+<Playground>
+  <Set>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+    <Button>Button 4</Button>
+    <Button>Button 5</Button>
+    <Button>Button 6</Button>
+    <Button>Button 7</Button>
+  </Set>
+</Playground>
+
+## Spacing
+
+You can modify the spacing of the set with the `spacing` prop.
+
+<Playground>
+  <Set spacing="xxxsmall">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+    <Tag>Tag 4</Tag>
+    <Tag>Tag 5</Tag>
+    <Tag>Tag 6</Tag>
+    <Tag>Tag 7</Tag>
+  </Set>
+</Playground>
+
+## Vertical
+
+You can also have a vertical set with the `isVertical` prop.
+
+<Playground>
+  <Set isVertical spacing="xxxsmall">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+    <Tag>Tag 4</Tag>
+    <Tag>Tag 5</Tag>
+    <Tag>Tag 6</Tag>
+    <Tag>Tag 7</Tag>
+  </Set>
+</Playground>
+
+## Props
+
+<PropsTable of={Set} />
+
+## Theming
+
+### Schema
+
+```jsx
+{
+  base: string | Object,
+  child: string | Object
+}
+```
diff --git a/src/Set/__tests__/Set.test.js b/src/Set/__tests__/Set.test.js
new file mode 100644
index 000000000..22a2d13e2
--- /dev/null
+++ b/src/Set/__tests__/Set.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import Set from '../Set';
+import 'jest-styled-components';
+
+it('renders correctly for a basic set', () => {
+  const { container } = render(
+    <Set>
+      <div>test</div>
+      <div>test</div>
+    </Set>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a set with custom spacing', () => {
+  const { container } = render(
+    <Set spacing="large">
+      <div>test</div>
+      <div>test</div>
+    </Set>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a vertical set', () => {
+  const { container } = render(
+    <Set isVertical>
+      <div>test</div>
+      <div>test</div>
+    </Set>
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
diff --git a/src/Set/__tests__/__snapshots__/Set.test.js.snap b/src/Set/__tests__/__snapshots__/Set.test.js.snap
new file mode 100644
index 000000000..538cdf31a
--- /dev/null
+++ b/src/Set/__tests__/__snapshots__/Set.test.js.snap
@@ -0,0 +1,246 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly for a basic set 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
+}
+
+.c2 > * {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3 c1"
+    spacing="xxsmall"
+  >
+    <div>
+      test
+    </div>
+    <div>
+      test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a set with custom spacing 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  margin-left: -2.5rem;
+  margin-top: -2.5rem;
+}
+
+.c2 > * {
+  margin-left: 2.5rem;
+  margin-top: 2.5rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3 c1"
+    spacing="large"
+  >
+    <div>
+      test
+    </div>
+    <div>
+      test
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders correctly for a vertical set 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: -0.5rem;
+}
+
+.c2 > * {
+  margin-top: 0.5rem;
+}
+
+<div
+  class="c0 c1"
+>
+  <div
+    class="c2 c3 c1"
+    spacing="xxsmall"
+  >
+    <div>
+      test
+    </div>
+    <div>
+      test
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/Set/index.js b/src/Set/index.js
new file mode 100644
index 000000000..3af5b21d3
--- /dev/null
+++ b/src/Set/index.js
@@ -0,0 +1,2 @@
+export { default } from './Set';
+export { default as Set } from './Set';
diff --git a/src/Set/styled.js b/src/Set/styled.js
new file mode 100644
index 000000000..1e6f6190c
--- /dev/null
+++ b/src/Set/styled.js
@@ -0,0 +1,39 @@
+import { theme } from 'styled-tools';
+import styled, { css } from '../styled';
+import { Flex } from '../primitives';
+
+export default styled(Flex)`
+  flex-wrap: wrap;
+
+  ${props =>
+    props.isVertical
+      ? css`
+          align-items: flex-start;
+          display: inline-flex;
+          flex-direction: column;
+          margin-top: -${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+        `
+      : css`
+          justify-content: flex-start;
+          margin-left: -${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+          margin-top: -${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+        `};
+
+  & > * {
+    ${props =>
+      props.isVertical
+        ? css`
+            margin-top: ${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+          `
+        : css`
+            margin-left: ${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+            margin-top: ${props => theme(`fannypack.layout.spacing.${props.spacing}`)(props)}rem;
+          `};
+
+    ${theme('fannypack.Set.child')};
+  }
+
+  & {
+    ${theme('fannypack.Set.base')};
+  }
+`;
diff --git a/src/Tag/Tag.mdx b/src/Tag/Tag.mdx
index 7da24e284..04c171878 100644
--- a/src/Tag/Tag.mdx
+++ b/src/Tag/Tag.mdx
@@ -6,14 +6,14 @@ menu: Components
 
 import { Playground, PropsTable } from 'docz';
 import Tag from '../Tag';
-import Tags from './Tags';
 import Group from '../Group';
+import Set from '../Set';
 
 # Tag
 
 ## Import
 
-`import { Tag, Tags } from 'fannypack'`
+`import { Tag } from 'fannypack'`
 
 ## Basic Usage
 
@@ -24,50 +24,50 @@ import Group from '../Group';
 ## Colors
 
 <Playground>
-  <Tags>
+  <Set spacing="xxxsmall">
     <Tag palette="primary">Primary</Tag>
     <Tag palette="secondary">Secondary</Tag>
     <Tag palette="success">Success</Tag>
     <Tag palette="warning">Warning</Tag>
     <Tag palette="danger">Danger</Tag>
-  </Tags>
+  </Set>
 </Playground>
 
 ### Tints
 
 <Playground>
-  <Tags>
+  <Set spacing="xxxsmall">
     <Tag palette="textTint">Default</Tag>
     <Tag palette="primaryTint">Primary</Tag>
     <Tag palette="secondaryTint">Secondary</Tag>
     <Tag palette="successTint">Success</Tag>
     <Tag palette="warningTint">Warning</Tag>
     <Tag palette="dangerTint">Danger</Tag>
-  </Tags>
+  </Set>
 </Playground>
 
 ## Sizes
 
 <Playground>
-  <Tags>
+  <Set spacing="xxxsmall">
     <Tag>Default</Tag>
     <Tag size="medium">Medium</Tag>
     <Tag size="large">Large</Tag>
-  </Tags>
+  </Set>
 </Playground>
 
-## Lists
+## Sets
 
-To group a set of buttons, use the `<Tags>` component.
+To group a set of tags, use the [`<Set>` component](/components/set).
 
 <Playground>
-  <Tags>
+  <Set spacing="xxxsmall">
     <Tag>Hello</Tag>
     <Tag>World</Tag>
     <Tag>This</Tag>
     <Tag>Is</Tag>
     <Tag>Me</Tag>
-  </Tags>
+  </Set>
 </Playground>
 
 ## Grouping
@@ -85,10 +85,6 @@ You can group tags to make one tag with the `<Group>` component.
 
 <PropsTable of={Tag} />
 
-## `<Tags>` Props
-
-<PropsTable of={Tags} />
-
 ## Theming
 
 ### `<Tag>` Schema
@@ -102,11 +98,3 @@ You can group tags to make one tag with the `<Group>` component.
   }
 }
 ```
-
-### `<Tags>` Schema
-
-```jsx
-{
-  base: string | Object
-}
-```
diff --git a/src/Tag/Tags.js b/src/Tag/Tags.js
deleted file mode 100644
index a6c55be63..000000000
--- a/src/Tag/Tags.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// @flow
-import React, { type Node } from 'react';
-
-import { Tags as _Tags } from './styled';
-
-type Props = {
-  children: Node,
-  className?: string
-};
-
-const Tags = ({ children, className, ...props }: Props) => (
-  <_Tags className={className} {...props}>
-    {children}
-  </_Tags>
-);
-
-Tags.defaultProps = {
-  className: null
-};
-
-export default Tags;
diff --git a/src/Tag/__tests__/Tag.test.js b/src/Tag/__tests__/Tag.test.js
index 537f71e71..8ad0d3b90 100644
--- a/src/Tag/__tests__/Tag.test.js
+++ b/src/Tag/__tests__/Tag.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import render from '../../_utils/tests/render';
 import Tag from '../Tag';
-import Tags from '../Tags';
+import Set from '../../Set';
 import 'jest-styled-components';
 
 it('renders correctly', () => {
@@ -29,11 +29,11 @@ describe('sizes', () => {
 
 it('renders correctly for a list of tags', () => {
   const { container } = render(
-    <Tags>
+    <Set>
       <Tag>Tag 1</Tag>
       <Tag>Tag 2</Tag>
       <Tag>Tag 3</Tag>
-    </Tags>
+    </Set>
   );
   expect(container.firstChild).toMatchSnapshot();
 });
diff --git a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
index 311ba20fa..7bea0f51b 100644
--- a/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
+++ b/src/Tag/__tests__/__snapshots__/Tag.test.js.snap
@@ -386,7 +386,7 @@ exports[`renders correctly for a list of tags 1`] = `
   color: inherit;
 }
 
-.c7 {
+.c6 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -424,7 +424,7 @@ exports[`renders correctly for a list of tags 1`] = `
   outline-offset: 2px;
 }
 
-.c6 {
+.c5 {
   display: inline-block;
 }
 
@@ -435,7 +435,7 @@ exports[`renders correctly for a list of tags 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   background-color: #435a6f;
   border-radius: 4px;
   color: #fff;
@@ -445,10 +445,6 @@ exports[`renders correctly for a list of tags 1`] = `
 }
 
 .c2 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
@@ -456,14 +452,13 @@ exports[`renders correctly for a list of tags 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
 }
 
-.c2 > .c4:not(:last-child) {
-  margin-right: 0.25rem;
-}
-
-.c2 > .c4 {
-  margin-bottom: 0.25rem;
+.c2 > * {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 <div
@@ -471,19 +466,20 @@ exports[`renders correctly for a list of tags 1`] = `
 >
   <div
     class="c2 c3 c1"
+    spacing="xxsmall"
   >
     <div
-      class="c4 c5 c6 c7"
+      class="c4 c5 c6"
     >
       Tag 1
     </div>
     <div
-      class="c4 c5 c6 c7"
+      class="c4 c5 c6"
     >
       Tag 2
     </div>
     <div
-      class="c4 c5 c6 c7"
+      class="c4 c5 c6"
     >
       Tag 3
     </div>
diff --git a/src/Tag/index.js b/src/Tag/index.js
index 45994ea7a..9494e0310 100644
--- a/src/Tag/index.js
+++ b/src/Tag/index.js
@@ -1,3 +1,2 @@
 export { default as Tag } from './Tag';
-export { default as Tags } from './Tags';
 export { default } from './Tag';
diff --git a/src/Tag/styled.js b/src/Tag/styled.js
index 49782fecb..bab693f4d 100644
--- a/src/Tag/styled.js
+++ b/src/Tag/styled.js
@@ -1,6 +1,5 @@
 import styled, { css } from 'reakit/styled';
 import InlineBlock from 'reakit/InlineBlock';
-import Flex from 'reakit/Flex';
 import { palette, theme } from 'styled-tools';
 
 const sizeAttributes = {
@@ -37,21 +36,4 @@ const Tag = styled(InlineBlock)`
   }
 `;
 
-export const Tags = styled(Flex)`
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  & > ${Tag}:not(:last-child) {
-    margin-right: ${theme('fannypack.layout.spacing.xxxsmall')}rem;
-  }
-  & > ${Tag} {
-    margin-bottom: ${theme('fannypack.layout.spacing.xxxsmall')}rem;
-  }
-
-  & {
-    ${theme('fannypack.Tags.base')};
-  }
-`;
-
 export default Tag;
diff --git a/src/index.js b/src/index.js
index 4027822a6..0e2a4f566 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ export { ThemeProvider } from './ThemeProvider';
 
 export { Alert } from './Alert';
 export { Blockquote } from './Blockquote';
-export { Button, Buttons } from './Button';
+export { Button } from './Button';
 export { Checkbox, CheckboxField } from './Checkbox';
 export { Code, HighlightedCode } from './Code';
 export { Column } from './Column';
@@ -28,8 +28,9 @@ export { Paragraph } from './Paragraph';
 export { Radio, RadioGroup, RadioGroupField } from './Radio';
 export { Rating, RatingStar } from './Rating';
 export { Select, SelectField } from './Select';
+export { Set } from './Set';
 export { Spinner } from './Spinner';
 export { Switch, SwitchField } from './Switch';
 export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeadCell, TableRow } from './Table';
-export { Tag, Tags } from './Tag';
+export { Tag } from './Tag';
 export { Text } from './Text';
diff --git a/src/themes/themes.mdx b/src/themes/themes.mdx
index c7c4e09b2..c113a8be5 100644
--- a/src/themes/themes.mdx
+++ b/src/themes/themes.mdx
@@ -188,7 +188,6 @@ const App = () => (
   Switch: SwitchThemeConfig,
   Table: TableThemeConfig,
   Tag: TagThemeConfig,
-  Tags: TagsThemeConfig,
   Text: TextThemeConfig
 }
 ```
@@ -228,7 +227,6 @@ Components:
 - [SwitchThemeConfig](/form/switch#theming)
 - [TableThemeConfig](/components/table#theming)
 - [TagThemeConfig](/components/tag#theming)
-- [TagsThemeConfig](/components/tag#theming)
 - [TextThemeConfig](/typography/text#theming)
 
 #### GlobalThemeConfig
diff --git a/src/types.js b/src/types.js
index da7ee0662..f30936c42 100644
--- a/src/types.js
+++ b/src/types.js
@@ -201,6 +201,10 @@ export type SelectThemeConfig = {
     large?: Stylesheet
   }
 };
+export type SetThemeConfig = {
+  base?: Stylesheet,
+  child?: Stylesheet
+};
 export type SpinnerThemeConfig = {
   base?: Stylesheet,
   sizes?: {
@@ -260,9 +264,6 @@ export type TagThemeConfig = {
     large?: Stylesheet
   }
 };
-export type TagsThemeConfig = {
-  base?: Stylesheet
-};
 export type TextThemeConfig = {
   base?: Stylesheet
 };
@@ -298,11 +299,11 @@ export type ThemeConfig = {
   RadioGroup?: RadioGroupThemeConfig,
   Rating?: RatingThemeConfig,
   Select?: SelectThemeConfig,
+  Set?: SetThemeConfig,
   Spinner?: SpinnerThemeConfig,
   Switch?: SwitchThemeConfig,
   Table?: TableThemeConfig,
   Tag?: TagThemeConfig,
-  Tags?: TagsThemeConfig,
   Text?: TextThemeConfig
 };
 /* ====== END: THEMES ====== */