diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
index 16932e82195..dd30f1d0925 100644
--- a/packages/react/jest.config.js
+++ b/packages/react/jest.config.js
@@ -69,6 +69,7 @@ module.exports = {
     '<rootDir>/src/__tests__/theme.test.ts',
     '<rootDir>/src/__tests__/themeGet.test.ts',
     '<rootDir>/src/__tests__/useSafeTimeout.test.ts',
+    '<rootDir>/src/experimental/IssueLabel',
     '<rootDir>/src/experimental/Skeleton',
     '<rootDir>/src/hooks/',
     '<rootDir>/src/internal/utils/',
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx
index 10291eb5154..d9151f188ae 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx
@@ -9,46 +9,46 @@ const meta = {
 
 export default meta
 
-export const VariantPink = () => <IssueLabel variant="pink" text="Issue label" />
+export const VariantPink = () => <IssueLabel variant="pink">Issue label</IssueLabel>
 
-export const VariantPlum = () => <IssueLabel variant="plum" text="Issue label" />
+export const VariantPlum = () => <IssueLabel variant="plum">Issue label</IssueLabel>
 
-export const VariantPurple = () => <IssueLabel variant="purple" text="Issue label" />
+export const VariantPurple = () => <IssueLabel variant="purple">Issue label</IssueLabel>
 
-export const VariantIndigo = () => <IssueLabel variant="indigo" text="Issue label" />
+export const VariantIndigo = () => <IssueLabel variant="indigo">Issue label</IssueLabel>
 
-export const VariantBlue = () => <IssueLabel variant="blue" text="Issue label" />
+export const VariantBlue = () => <IssueLabel variant="blue">Issue label</IssueLabel>
 
-export const VariantCyan = () => <IssueLabel variant="cyan" text="Issue label" />
+export const VariantCyan = () => <IssueLabel variant="cyan">Issue label</IssueLabel>
 
-export const VariantTeal = () => <IssueLabel variant="teal" text="Issue label" />
+export const VariantTeal = () => <IssueLabel variant="teal">Issue label</IssueLabel>
 
-export const VariantPine = () => <IssueLabel variant="pine" text="Issue label" />
+export const VariantPine = () => <IssueLabel variant="pine">Issue label</IssueLabel>
 
-export const VariantGreen = () => <IssueLabel variant="green" text="Issue label" />
+export const VariantGreen = () => <IssueLabel variant="green">Issue label</IssueLabel>
 
-export const VariantLime = () => <IssueLabel variant="lime" text="Issue label" />
+export const VariantLime = () => <IssueLabel variant="lime">Issue label</IssueLabel>
 
-export const VariantOlive = () => <IssueLabel variant="olive" text="Issue label" />
+export const VariantOlive = () => <IssueLabel variant="olive">Issue label</IssueLabel>
 
-export const VariantLemon = () => <IssueLabel variant="lemon" text="Issue label" />
+export const VariantLemon = () => <IssueLabel variant="lemon">Issue label</IssueLabel>
 
-export const VariantYellow = () => <IssueLabel variant="yellow" text="Issue label" />
+export const VariantYellow = () => <IssueLabel variant="yellow">Issue label</IssueLabel>
 
-export const VariantOrange = () => <IssueLabel variant="orange" text="Issue label" />
+export const VariantOrange = () => <IssueLabel variant="orange">Issue label</IssueLabel>
 
-export const VariantRed = () => <IssueLabel variant="red" text="Issue label" />
+export const VariantRed = () => <IssueLabel variant="red">Issue label</IssueLabel>
 
-export const VariantCoral = () => <IssueLabel variant="coral" text="Issue label" />
+export const VariantCoral = () => <IssueLabel variant="coral">Issue label</IssueLabel>
 
-export const VariantGray = () => <IssueLabel variant="gray" text="Issue label" />
+export const VariantGray = () => <IssueLabel variant="gray">Issue label</IssueLabel>
 
-export const VariantBrown = () => <IssueLabel variant="brown" text="Issue label" />
+export const VariantBrown = () => <IssueLabel variant="brown">Issue label</IssueLabel>
 
-export const VariantAuburn = () => <IssueLabel variant="auburn" text="Issue label" />
+export const VariantAuburn = () => <IssueLabel variant="auburn">Issue label</IssueLabel>
 
 export const HexColor = (args: {fillColor: `#${string}`}) => (
-  <IssueLabel text="Issue label" fillColor={args.fillColor} />
+  <IssueLabel fillColor={args.fillColor}>Issue label</IssueLabel>
 )
 HexColor.args = {
   fillColor: '#59B200',
@@ -56,7 +56,7 @@ HexColor.args = {
 HexColor.argTypes = {
   fillColor: {control: {type: 'color'}},
   variant: {table: {disable: true}},
-  text: {table: {disable: true}},
+  children: {table: {disable: true}},
   id: {table: {disable: true}},
   className: {table: {disable: true}},
   onClick: {table: {disable: true}},
@@ -65,19 +65,19 @@ HexColor.argTypes = {
   href: {table: {disable: true}},
 }
 
-export const AsLink = () => <IssueLabel href="/" text="Issue label" />
+export const AsLink = () => <IssueLabel href="/">Issue label</IssueLabel>
 
-export const AsButton = () => <IssueLabel text="Issue label" as="button" />
+export const AsButton = () => <IssueLabel as="button">Issue label</IssueLabel>
 
-export const OnClick = () => <IssueLabel text="Issue label" onClick={() => alert('clicked')} />
+export const OnClick = () => <IssueLabel onClick={() => alert('clicked')}>Issue label</IssueLabel>
 
 export const GroupOfLabels = () => (
   <Stack direction="horizontal" gap="condensed" wrap="wrap">
-    <IssueLabel variant="blue" text="Issue label" />
-    <IssueLabel variant="purple" text="Another label" />
-    <IssueLabel variant="green" text="A third label" />
-    <IssueLabel variant="orange" text="Issue label" />
-    <IssueLabel variant="yellow" text="Another label" />
-    <IssueLabel variant="brown" text="A third label" />
+    <IssueLabel variant="blue">Issue label</IssueLabel>
+    <IssueLabel variant="purple">Another label</IssueLabel>
+    <IssueLabel variant="green">A third label</IssueLabel>
+    <IssueLabel variant="orange">Issue label</IssueLabel>
+    <IssueLabel variant="yellow">Another label</IssueLabel>
+    <IssueLabel variant="brown">A third label</IssueLabel>
   </Stack>
 )
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
index f4ab7006ba6..a47ca33b6fb 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
@@ -8,12 +8,12 @@ const meta = {
 
 export default meta
 
-export const Default = () => <IssueLabel text="Issue label" />
+export const Default = () => <IssueLabel>Issue label</IssueLabel>
 
 export const Playground: StoryObj<typeof IssueLabel> = {
   render: args => <IssueLabel {...args} />,
   args: {
-    text: 'Issue label',
+    children: 'Issue label',
     as: 'span',
   },
   argTypes: {
@@ -45,9 +45,6 @@ export const Playground: StoryObj<typeof IssueLabel> = {
         'auburn',
       ],
     },
-    text: {
-      control: 'text',
-    },
     as: {
       control: 'inline-radio',
       options: ['span', 'button', 'a'],
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.test.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.test.tsx
new file mode 100644
index 00000000000..0a904c2fa37
--- /dev/null
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.test.tsx
@@ -0,0 +1,19 @@
+import {describe, expect, it, vi} from 'vitest'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {IssueLabel} from '../IssueLabel'
+
+describe('IssueLabel', () => {
+  it('should support `className` on outermost element', () => {
+    const {container} = render(<IssueLabel className="custom-class">Label</IssueLabel>)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('should support merging `style` on outermost element', () => {
+    const {container} = render(<IssueLabel style={{color: 'red', backgroundColor: 'blue'}}>Label</IssueLabel>)
+    expect(container.firstChild).toHaveStyle({
+      color: 'red',
+      backgroundColor: 'blue',
+    })
+  })
+})
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index 343b4d29f0a..be03b4f20f7 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -3,7 +3,8 @@ import {getColorsFromHex} from './getColorFromHex'
 import {useTheme} from '../../ThemeProvider'
 import {clsx} from 'clsx'
 import classes from './IssueLabel.module.css'
-export type Hex = `#${string}`
+
+type Hex = `#${string}`
 
 type LabelColorVariant =
   | 'pink'
@@ -26,35 +27,15 @@ type LabelColorVariant =
   | 'brown'
   | 'auburn'
 
-export interface IssueLabelProps {
+type IssueLabelProps<As extends React.ElementType> = {
+  as?: As
   fillColor?: Hex
   variant?: LabelColorVariant
-  href?: string
-  as?: 'button' | 'a' | 'span'
-  text: React.ReactNode
-  id?: number | string
   className?: string
-  onClick?: React.MouseEventHandler<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>
-  onFocus?: React.FocusEventHandler<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>
-}
-
-export function IssueLabel({
-  className,
-  fillColor,
-  variant = 'gray',
-  href,
-  onClick,
-  onFocus,
-  text,
-  as,
-  id,
-  ...rest
-}: IssueLabelProps) {
-  // Error handling: `href` and `onClick` should not be set simultaneously
-  if (href && onClick) {
-    throw new Error('`href` and `onClick` cannot both be set. Choose either a link (`<a>`) or a button (`<button>`).')
-  }
+} & React.ComponentPropsWithoutRef<React.ElementType extends As ? 'span' : As>
 
+function IssueLabel<As extends React.ElementType>(props: IssueLabelProps<As>) {
+  const {as, children, className, fillColor, onClick, style, variant = 'gray', ...rest} = props
   const {resolvedColorScheme} = useTheme()
   const mode = resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'
   // TODO: get the bgColor, getting it from theme.colorScheme seems a bit sketchy
@@ -63,31 +44,25 @@ export function IssueLabel({
     dark: '#0d1117',
   }
 
-  // Determine the component type: Prioritize `as`, then fallback to `href` or `onClick` logic
-  let Component: 'a' | 'button' | 'span' = 'span' // Default to <span>
-
-  if (as) {
-    Component = as // use 'as' prop if provided
-  } else if (href) {
-    Component = 'a' // render as <a> if `href` is provided
+  let BaseComponent = 'span'
+  if ('href' in rest) {
+    BaseComponent = 'a'
   } else if (onClick) {
-    Component = 'button' // render as <button> if `onClick` is provided
+    BaseComponent = 'button'
   }
 
-  const anchorProps = href ? {href} : {}
-
   return (
-    <Component
+    <BaseComponent
       {...rest}
-      {...anchorProps}
-      onClick={onClick}
-      onFocus={onFocus}
-      id={id?.toString()}
-      className={clsx(classes.IssueLabel, className)}
+      className={clsx(className, classes.IssueLabel)}
       data-variant={fillColor ? undefined : variant}
-      style={fillColor ? getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode]) : undefined}
+      onClick={onClick}
+      style={fillColor ? {...style, ...getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode])} : style}
     >
-      {text}
-    </Component>
+      {children}
+    </BaseComponent>
   )
 }
+
+export {IssueLabel}
+export type {Hex, IssueLabelProps}
diff --git a/packages/react/vitest.config.browser.mts b/packages/react/vitest.config.browser.mts
index f26780c8378..4a18a204a97 100644
--- a/packages/react/vitest.config.browser.mts
+++ b/packages/react/vitest.config.browser.mts
@@ -79,6 +79,7 @@ export default defineConfig({
       'src/__tests__/filterObject.test.ts',
       'src/__tests__/theme.test.ts',
       'src/__tests__/themeGet.test.ts',
+      'src/experimental/IssueLabel/**/*.test.?(c|m)[jt]s?(x)',
       'src/experimental/Skeleton/**/*.test.?(c|m)[jt]s?(x)',
       'src/hooks/**/*.test.?(c|m)[jt]s?(x)',
       'src/internal/utils/**/*.test.?(c|m)[jt]s?(x)',