Add IconButton component

HedvigInsurance · Sep 16, 2024 · 77ce6fe · 77ce6fe
1 parent a8ee15e
commit 77ce6fe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -23,6 +23,7 @@ type BaseProps = {
   loading?: boolean
   Icon?: ReactNode
   iconPosition?: 'left' | 'right'
+  isIconButton?: boolean
 }
 
 export type ButtonProps<C extends React.ElementType> = PolymorphicComponentPropsWithRef<
@@ -51,6 +52,7 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     children,
     Icon,
     iconPosition = 'left',
+    isIconButton,
     ...props
   }: ButtonProps<C>,
   ref?: PolymorphicRef<C>,
@@ -83,7 +85,7 @@ export const Button: PolymorphicComponent = forwardRef(function Button<
     >
       <span className={childrenWrapper} style={{ opacity: loading ? 0 : 1 }}>
         {iconPosition === 'left' && Icon}
-        {children && <span className={textWrapper}>{children}</span>}
+        {children && <span className={clsx(!isIconButton && textWrapper)}>{children}</span>}
         {iconPosition === 'right' && Icon}
       </span>
       {hiddenText && hiddenText}

diff --git a/packages/ui/src/components/Button/IconButton.tsx b/packages/ui/src/components/Button/IconButton.tsx
@@ -0,0 +1,17 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button } from './Button'
+
+type ButtonProps = Omit<ComponentProps<typeof Button<'button'>>, 'size'>
+
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => (
+  <Button
+    variant="ghost"
+    size="small"
+    style={{ padding: '0', aspectRatio: '1', height: 'auto' }}
+    {...props}
+    isIconButton
+    ref={forwardedRef}
+  />
+))
+
+IconButton.displayName = 'IconButton'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -4,6 +4,8 @@ export { HedvigLogo } from './components/HedvigLogo/HedvigLogo'
 export { HedvigSymbol } from './components/HedvigSymbol/HedvigSymbol'
 export { Space } from './components/Space'
 export { Button, type ButtonProps } from './components/Button/Button'
+export { IconButton } from './components/Button/IconButton'
+
 export { InputBase } from './components/InputBase'
 export type { InputBaseProps } from './components/InputBase'
 export { Heading } from './components/Heading/Heading'