Polaris <Button> inside TitleBar issue

[ttnbtfy]

Summary

Hi guys,
I can't use Polaris Button in TitleBar from '@shopify/app-bridge-react', anyone know why?
I just want to set the loading state when the button is clicked instead of having to do it manually.

If Polaris Button cannot be used, how can I set the loading state for this button (as short as possible)?
Thank you.

Expected behavior

I just want to set the loading state when the button is clicked instead of having to do it manually.

Actual behavior

When using <Button> I get this error:

Uncaught (in promise) Error: Unexpected tag <<span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">Install</span>> in <button>

Steps to reproduce

My example code here:

import { Modal, TitleBar, useAppBridge } from '@shopify/app-bridge-react';
import { Page, Button, Text } from '@shopify/polaris';

const App = () => {
	const shopify = useAppBridge();

	return (
		<Page>
			<Button onClick={ () => shopify.modal.show( 'my-modal' ) }>Show modal</Button>

			<Modal id="my-modal">
				<TitleBar title="Hello">
					<button>Cancel</button>
					<button onClick={ () => setLoading( true ) }>Install</button> {/* How to pass <Button></Button> here without error */}
				</TitleBar>

				<Text variant="bodyMd" as="p">Lorem ipsum dolor, sit amet consectetur adipisicing, elit. Id, neque.</Text>
			</Modal>
		</Page>
	);
};

export default App;

Are you using React components?

No

Polaris version number

No response

Browser

No response

Device

No response

[github-actions]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.