Forge UI - Button as a link

Forge Forge UI Kit and Custom UI
1

Hey folks,

We’re building a Forge application using UI Kit (for Jira) and have run into a limitation with link components.

What we need:
A link component that supports an onClick event handler.

What we’ve tried:

  • The Link component doesn’t support onClick event handlers

  • The LinkButton component supports onClick and has an appearance="link" property, but it doesn’t actually render as a proper link (unsure if this is intended behavior or a bug)

We’d prefer to stay within UI Kit rather than moving to Custom UI.
Has anyone found a workaround for this, or is there a recommended approach we’re missing?

Thanks in advance!

2

Hi @dsimoes , yes that is the current design direction for Link and LinkButton and it unfortunately does come with those limitations. However, you can create a custom component with Pressable as a workaround for your scenario with similar styling to Link


const linkStyle = xcss({
  color: "color.link",
  display: "inline",
  padding: "space.0",
  backgroundColor: "color.background.neutral.subtle",
})

const LinkWithOnClick = ({children, onClick}) => {
  return (
    <Pressable
      onClick={onClick}
      xcss={linkStyle}
    >
       {children}
    </Pressable>
  );
}


// usage
<LinkWithOnClick onClick={() => console.log('hello')}>Hello</LinkWithOnClick>
3

Hi @QuocLieu,

Thanks for the quick reply! I tested the Pressable workaround, but unfortunately it doesn’t work for my use case due to how Forge UI handles external links.

My goal is to track analytics when users click a specific link. When wrapping <Pressable> around <Link>, the onClick handler fires twice (or more)—once when the link is clicked AND again when the user interacts with the external navigation confirmation popup. This makes it impossible to accurately track the actual navigation intent.

Since Forge UI doesn’t support HTML elements, <Link> is the only primitive available for rendering links. Without a reliable way to capture click events on links, we can’t implement proper analytics tracking.

Are there any other workarounds you’d recommend? Or is there a plan to address this limitation in Forge UI’s <Link> and <LinkButton> components?

It seems inconsistent that Atlaskit UI doesn’t have these restrictions while Forge UI does. Would love to understand if there’s a technical reason for this, or if this could be improved in a future release.

Thanks again for your help!

4

Hi @dsimoes , would it be possible to use router.navigate for the navigation within the onClick of Pressable in your app? This should only call the onClick once. But I recognise this isn’t ideal for accessibility reasons. I’ve created a ticket for you to follow here for adding the prop to Link: https://jira.atlassian.com/browse/ECO-1314

Would the following work for you for the time being:

const LinkWithOnClick = ({children, onClick, href}) => {
  return (
    <Pressable
      onClick={() => {
           onClick();
           router.navigate(href);
      }}
      xcss={linkStyle}
    >
       {children}
    </Pressable>
  );
}

// usage
<LinkWithOnClick href="/home" onClick={() => console.log('home clicked')}>Home</LinkWithOnClick>