add addonafter

Arize-ai · Jan 23, 2024 · b9f9ed2 · b9f9ed2
1 parent a42483a
commit b9f9ed2
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/field/Addon.tsx b/src/field/Addon.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import theme from '../theme';
 import { Text } from '../content/Text';
 
-const addonBeforeCSS = css`
+const addonCSS = css`
   background-color: var(--ac-global-color-grey-300);
   padding: 0 var(--ac-global-dimension-static-size-100);
   flex: none;
@@ -18,7 +18,20 @@ const addonBeforeCSS = css`
  */
 export function AddonBefore({ children }: { children: ReactNode }) {
   return (
-    <div css={addonBeforeCSS} className="ac-addon ac-addon--before">
+    <div css={addonCSS} className="ac-addon ac-addon--before">
+      <Text textSize="medium" weight="heavy" color="text-700">
+        {children}
+      </Text>
+    </div>
+  );
+}
+
+/**
+ * A label element that describes a button or an input field
+ */
+export function AddonAfter({ children }: { children: ReactNode }) {
+  return (
+    <div css={addonCSS} className="ac-addon ac-addon--after">
       <Text textSize="medium" weight="heavy" color="text-700">
         {children}
       </Text>