In App Bridge v4, to put a TitleBar button with a link, or to add a breadcrumb, you have to add an <a> tag as a child of the ui-title-bar element. However, if you need to make it a breadcrumb or a primary action you have to specify the variant attribute on the element. This works, but I'm getting an error with the types that "variant" isn't a valid attribute:
Type '{ children: string; variant: string; href: string; onClick: () => void; }' is not assignable to type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
Property 'variant' does not exist on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.ts(2322)
To Reproduce
Use the latest @shopify/app-bridge-react library, or have the types installed:
<ui-title-bar>
<a href="/home" variant="breadcrumb">
Home
</a>
</ui-title-bar>;
Packages and versions
List the relevant packages you’re using, and their versions. For example:
Describe the bug
In App Bridge v4, to put a TitleBar button with a link, or to add a breadcrumb, you have to add an
<a>
tag as a child of theui-title-bar
element. However, if you need to make it a breadcrumb or a primary action you have to specify thevariant
attribute on the element. This works, but I'm getting an error with the types that "variant" isn't a valid attribute:To Reproduce
Use the latest
@shopify/app-bridge-react
library, or have the types installed:Packages and versions
List the relevant packages you’re using, and their versions. For example:
Shopify App Bridge CDN version.
@shopify/app-bridge-react
@4.1.1
Platform
Additional context
NodeJS 19 with NextJS 14 and Typescript 5.4.2.