feat: badge shape for labels (#182)

Arize-ai · Nov 30, 2023 · 8094a58 · 8094a58
1 parent d5cec39
commit 8094a58
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/label/Label.tsx b/src/label/Label.tsx
@@ -38,17 +38,30 @@ export interface LabelProps extends HTMLAttributes<HTMLElement> {
     | 'purple'
     | 'gray'
     | ColorValue;
+  /**
+   * The shape of the label
+   * @default pill
+   */
+  shape?: LabelShape;
 }
 
+type LabelShape = 'pill' | 'badge';
+
 const labelCSS = (color: string | null) => css`
   color: ${color || theme.labelColors.white};
   border: 1px solid ${color || theme.labelColors.white};
   background-color: transparent;
   padding: 1px 8px;
-  border-radius: 10px;
+
   text-align: center;
   display: inline-flex;
   align-items: center;
+  &[data-shape='pill'] {
+    border-radius: 12px;
+  }
+  &[data-shape='badge'] {
+    border-radius: 4px;
+  }
   &.interactive {
     cursor: pointer;
     transition: opacity 0.2s ease;
@@ -98,6 +111,7 @@ export const Label = ({
   icon,
   children,
   color = 'white',
+  shape = 'pill',
   onClick,
   ...props
 }: LabelProps) => {
@@ -124,6 +138,7 @@ export const Label = ({
       className={classNames(classes)}
       css={labelCSS(globalColor)}
       onClick={onClick}
+      data-shape={shape}
       {...props}
     >
       {icon}