Help with UI Button Row

Developer Support APIs & Integrations
,
1

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?

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>
 );
};
2

Hi @danielle_little,

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:

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

Hope this helps!

3

This is what ended up working for me:

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>
 );
};