diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index e19b9260..d9b384a0 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -6,6 +6,11 @@ export const Global = styled.div`
     font-family: 'Helvetica Neue', sans-serif;
   }
 
+  button {
+    padding: 0;
+    margin: 0;
+  }
+
   --palette-snow-1000: #000000;
   --palette-snow-500: #c0c0c0;
   --palette-snow-300: #e5e5e5;
@@ -211,6 +216,8 @@ const Container = styled.div`
   }
   &[data-dir='horizontal'] {
     flex-direction: row;
+    flex-wrap: wrap;
+
     & > * + * {
       margin-left: 0.5rem;
     }
diff --git a/src/ui/atoms/button/index.tsx b/src/ui/atoms/button/index.tsx
index 155ab27d..dd9e46fd 100644
--- a/src/ui/atoms/button/index.tsx
+++ b/src/ui/atoms/button/index.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
+import { box } from 'ui/elements/quarks';
 
 export type ButtonVariants = 'secondary' | 'primary' | 'destructive' | 'text';
 export type ButtonSizes = 'default' | 'small';
@@ -40,10 +41,11 @@ export const Button = styled(ButtonBase)`
   --local-shape-color: var(--woly-shape-default);
   --local-border-color: var(--woly-shape-default);
 
+  ${box};
+
   box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
-  padding: var(--local-vertical) 0;
   justify-content: center;
 
   color: var(--local-text-color);
@@ -60,9 +62,9 @@ export const Button = styled(ButtonBase)`
   &[data-outlined='true'] {
     background-color: transparent;
     color: var(--local-shape-color);
-      svg > path {
-        fill: var(--local-shape-color);
-      }
+    svg > path {
+      fill: var(--local-shape-color);
+    }
   }
 
   [data-icon] {
@@ -72,15 +74,6 @@ export const Button = styled(ButtonBase)`
     justify-content: center;
     width: var(--local-icon-size);
     height: var(--local-icon-size);
-    padding: 0 0 0 calc(var(--local-horizontal) - var(--local-compensate));
-  }
-
-  [data-text] {
-    padding: 0 var(--local-horizontal);
-  }
-
-  span[data-icon='left'] + span[data-text] {
-    padding-left: var(--local-gap);
   }
 
   svg > path {
diff --git a/src/ui/elements/quarks/box/index.tsx b/src/ui/elements/quarks/box/index.tsx
new file mode 100644
index 00000000..9c998850
--- /dev/null
+++ b/src/ui/elements/quarks/box/index.tsx
@@ -0,0 +1,32 @@
+import { css } from 'styled-components';
+
+export const box = css`
+  --local-vertical: calc(
+    1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width)
+  );
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical) -
+      var(--woly-border-width)
+  );
+  --local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-compensate: var(--local-vertical);
+  & > * {
+    padding-top: var(--local-vertical);
+    padding-bottom: var(--local-vertical);
+  }
+  & > :first-child {
+    padding-left: var(--local-horizontal);
+  }
+  & > :last-child {
+    padding-right: var(--local-horizontal);
+  }
+  & > [data-icon]:first-child {
+    padding-left: var(--local-compensate);
+  }
+  & > [data-icon]:last-child {
+    padding-right: var(--local-compensate);
+  }
+  & > :not(:first-child) {
+    margin-left: var(--local-gap);
+  }
+`;
diff --git a/src/ui/elements/quarks/index.ts b/src/ui/elements/quarks/index.ts
index 858e080c..66dd5ce8 100644
--- a/src/ui/elements/quarks/index.ts
+++ b/src/ui/elements/quarks/index.ts
@@ -1,2 +1,3 @@
+export { box } from './box';
 export { InputContainer } from './input-container';
 export { InputElement } from './input-element';