Skip to content

Unable to use polymorphic as for Heading component #6103

Open
@joshblack

Description

@joshblack

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

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions