feat: IconButton & RoundIconButton

src/components/IconButton.tsx

@@ -0,0 +1,49 @@
+import { IconProps } from '@primer/octicons-react'
+import { Box, merge, SxProp, useTheme } from '@primer/react'
+import { getBaseStyles, getSizeStyles, getVariantStyles } from '@primer/react/lib/Button/styles'
+import {
+  IconButtonProps as PrimerIconButtonProps,
+  StyledButton
+} from '@primer/react/lib/Button/types'
+import React from 'react'
+import { is } from 'utils/is'
+
+export type IconButtonProps = PrimerIconButtonProps & {
+  iconSize?: IconProps['size']
+  iconColor?: string
+}
+
+// Modified version of @primer/react/lib/Button/Button.tsx
+// Added better support of colors & size
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    variant = 'default',
+    size = 'medium',
+    iconSize, // grow the icon to the same size as the button
+    iconColor, // extra control of icon color
+    sx: sxProp = {},
+    icon: Icon,
+    ...rest
+  } = props
+  const { theme } = useTheme()
+  const sxStyles = merge.all(
+    [
+      getBaseStyles(theme),
+      getSizeStyles(size, variant, true),
+      getVariantStyles(variant, theme),
+      // Unsatisfied with preset color of the `invisible` variant
+      {
+        color: iconColor || (variant === 'invisible' ? 'fg.subtle' : undefined),
+      },
+      sxProp as SxProp,
+    ].filter(is.not.undefined),
+  )
+  return (
+    <StyledButton sx={sxStyles} {...rest}>
+      <Box as="span" sx={{ display: 'inline-block' }}>
+        <Icon size={iconSize} />
+      </Box>
+    </StyledButton>
+  )
+}

src/components/RoundIconButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconButton, IconButtonProps } from './IconButton'
+
+export function RoundIconButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      variant="invisible"
+      title={props['aria-label']}
+      {...props}
+      sx={{
+        borderRadius: '20px',
+        ...props.sx,
+      }}
+    />
+  )
+}