# Help with UI Button Row

**URL:** <https://community.hubspot.com/t/help-with-ui-button-row/128003>\
**Category:** APIs & Integrations\
**Tags:** developer-tools, object\
**Created:** [March 15, 2025, 4:37am UTC](https://community.hubspot.com/t/help-with-ui-button-row/128003 "2025-03-15T04:37:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielle\_little](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@danielle\_little](https://community.hubspot.com/u/danielle_little)\
**Post date:** [March 15, 2025, 4:37am UTC](https://community.hubspot.com/t/help-with-ui-button-row/128003/1 "2025-03-15T04:37:26Z")

</div>

Let me start by saying that I am not a developer - I have spent quite a bit of time already attempting to make this work and alas, here I am. The snippet below is for UI buttons on the Deal object that will hyperlink to open the link in a new tab. The issue is that it is deploying, but no buttons are displaying.

Below is what I am currently using for the code, but I am not sure on the accuracy. The example in the documentation did not have it linking to an external URL.

What am I doing wrong?

```lia-code-sample
import { Button } from '@hubspot/ui-extensions';

const Extension = () => {
 return (
 <div>
 <Button
 onClick={() => {
 window.open('https://www.google.com', '_blank');
 }}
 variant="primary"
 size="md"
 type="button"
 >
 Annual
 </Button>

 <Button
 onClick={() => {
 window.open('https://www.google.com', '_blank');
 }}
 variant="secondary"
 size="md"
 type="button"
 >
 Monthly
 </Button>
 </div>
 );
};

```

---

<div class="post-metadata">

**Author:** ![evaldas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/evaldas/32/69160_2.png) [@evaldas](https://community.hubspot.com/u/evaldas)\
**Post date:** [March 15, 2025, 4:04pm UTC](https://community.hubspot.com/t/help-with-ui-button-row/128003/2 "2025-03-15T16:04:51Z")

</div>

Hi [@danielle\_little](https://community.hubspot.com/t5/user/viewprofilepage/user-id/809612),

Looking at your code, it looks like the \<div\> elements would be causing the issue, as it is not a supported component for UI extensions. You can replace the \<div\> with a \<Flex\> component.

I also noticed that the way the \<Button\> components are written, they will not work and cause an error. For external links, you would need to use the “href” instead of “onClick”.

Updated code below:

```lia-code-sample
import { Button } from '@hubspot/ui-extensions';

const Extension = () => {
 return (
 <Flex direction="row" gap="small">
 <Button
 href="https://www.google.com" 
 external="true"
 variant="primary"
 size="md"
 type="button"
 >
 Annual
 </Button>

 <Button
 href="https://www.google.com" 
 external="true"
 variant="secondary"
 size="md"
 type="button"
 >
 Monthly
 </Button>
 </Flex>
 );
};

```

You can see all the available components in the “Standard Components” section of the UI components overview page: [UI extension components - HubSpot docs](https://developers.hubspot.com/docs/reference/ui-components/overview)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![danielle\_little](https://avatars.discourse-cdn.com/v4/letter/d/9de0a6/32.png) [@danielle\_little](https://community.hubspot.com/u/danielle_little)\
**Post date:** [April 22, 2025, 9:30pm UTC](https://community.hubspot.com/t/help-with-ui-button-row/128003/3 "2025-04-22T21:30:39Z")

</div>

This is what ended up working for me:

```lia-code-sample
import React from "react";
import { hubspot } from "@hubspot/ui-extensions";
import {
 Flex,
 Button,
 Text,
} from "@hubspot/ui-extensions";

// Initialize the extension
hubspot.extend(({ context }) => (
 <Extension />
));

const Extension = () => {
 return (
 <Flex direction="column" gap="medium" align="left">
 <Text>
 Select the monthly or annual order form based on the customer’s payment preference. Once signed, upload the completed document to the files section of your deal.
 </Text>

 <Flex direction="row" gap="small" justify="center">
 <Button
 href="https://www.google.com"
 external={true}
 variant="primary"
 size="md"
 type="button"
 >
 Annual
 </Button>

 <Button
 href="https://www.google.com"
 external={true}
 variant="secondary"
 size="md"
 type="button"
 >
 Monthly
 </Button>
 </Flex>
 </Flex>
 );
};

```