diff --git a/package.json b/package.json
index 3a1472b4..c2db05e0 100644
--- a/package.json
+++ b/package.json
@@ -55,11 +55,11 @@
   "size-limit": [
     {
       "path": "dist/components.cjs.production.min.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     },
     {
       "path": "dist/components.esm.js",
-      "limit": "100 KB"
+      "limit": "150 KB"
     }
   ],
   "devDependencies": {
diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
new file mode 100644
index 00000000..e5a812e0
--- /dev/null
+++ b/src/field/Addon.tsx
@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { css } from '@emotion/core';
+import theme from '../theme';
+import { Text } from '../content/Text';
+
+const addonBeforeCSS = css`
+  background-color: ${theme.colors.gray400};
+  padding: ${theme.spacing.padding8}px;
+  flex: none;
+  box-sizing: border-box;
+`;
+
+/**
+ * A label element that describes a button or an input field
+ */
+export function AddonBefore({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
+      <Text textSize="medium" weight="heavy" color="white70">
+        {children}
+      </Text>
+    </div>
+  );
+}