react icon indicating copy to clipboard operation
react copied to clipboard

Unable to use polymorphic `as` for `Heading` component

Open joshblack opened this issue 7 months ago • 0 comments

Description

When using the Heading component, I would like to use the as type to specify the heading level. This is specified in the component types but when using it there is a TypeScript error:

Diagnostics:
1. This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided. [2745]
2. No overload matches this call.
     Overload 2 of 2, '(props: Merge<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, { as?: "h1" | ... 5 more ... | undefined; variant?: "small" | ... 2 more ... | undefined; } & SxProp & { ...; }>): ReactNode', gave the following error.
       Type '"h1"' is not assignable to type '"h2"'. [2769]

Steps to reproduce

Import and use the Heading component:

import {Heading} from '@primer/react'

<Heading as="h1" variant="large">...</Heading>

Version

v37.23.0

Browser

No response

joshblack avatar May 21 '25 17:05 joshblack