Issue using Custom UI and @atlaskit/button

Forge Forge UI Kit and Custom UI
,
1

Hello,

I have an global page app that I’m developing using the Custom UI and for some reason I can’t get a button to display in my app that is of normal size. No matter what Button variant I try, the button that is displayed in Jira is the size of my cursor:

Screenshot 2024-04-09 at 8.49.32 PM

The button works, when I click on it it will call the onClick function, but its too small to display the text or for me to want to use. Here is the code:

import Button from "@atlaskit/button";

function Home() {
  return (
    <>
      <h2>Connect</h2>
      <Button text="Get Data" onClick={getProjectData} />
    </>
  );
}

I have this line in index.jsx file:

import '@atlaskit/css-reset';

And the following in my manifest.yml file:

permissions:
  content:
    styles:
      - "unsafe-inline"

I’ve also tried importing the Button from @forge/react with no luck. Can someone please advise on what I’m doing wrong here. I’m still fairly new to Forge development and I haven’t been able to find this issue in the community.
Forge Custom UI and UI kit (beta) atlaskit jira-cloud jira-plugin Forge

1 Like
2

Based on the examples, it seems like the way to pass text to the Button component is as children, not the text component. So I think it’s showing as empty because it has no text to fill the space. Try like this:

import Button from "@atlaskit/button";

const getProjectData = () => {}

function Home() {
  return (
    <>
      <h2>Connect</h2>
      <Button onClick={getProjectData}>Get Data</Button>
    </>
  );
}
2 Likes
3

Thanks for catching that. Once I passed the text as children, the button worked as expected.

1 Like