Clickable Images With Atlassian Forge UI Kit

Forge Forge UI Kit and Custom UI
,
1

Hello all, I am aware this may be a newbie question, but for some reason I was not able to find anywhere in the documentation or through my own tinkering a way to have clickable images when using the UI kit image element. I have custom image icons that I made that I’d like to make clickable, but for now I am using standard buttons underneath the images. People often confuse the image to be a button they can click, and it’s been one of my most common complaints for the app I’m working on. Does anybody know if this is possible or if there is a workaround to make a UI kit image clickable?

Thanks in advance for your help!

2

Hi Abel,

At the moment, it’s not possible to make the UI Kit Image a button, and it’s not possible to specify a custom Icon for your UI Kit Button.

So, you have a few options:

  1. If you need it to click to a link, this works fairly well:
    <Text>an image with a link</Text>
<Link href="http://forge.quest"><Image src={cheese} /></Link>
  2. If you need a button, I found this worked, but the button click / select graphics are not great (the image height is 447px in my example):
    <Text>an image with a button</Text>
<Box xcss={xcss({ height: '447px' })}>
  <Button onClick={() => console.log('clicked')} appearance='subtle'><Image src={cheese} /></Button>
</Box>
  3. The final option would be to create your own custom frame component to make a clickable image.

I also had a quick look at the public issue tracker for Atlassian Ecosystem, but it doesn’t look like there’s a feature request for this functionality.

I hope this helps put you on the right path for a workaround.

Cheers
Mel

3

Thanks for this @mpaisley. I tried the Box solution, but I can see the subtle button highlighted behind the image when I hover my mouse over the image, which does not look good. Option 3 only allows for 1 frame, and I need 4, so that solution does not work either.

Each button is opening up a modal. Is there a way to do this using the hyperlink option? If not, is there any way I can make the height of the button the same as the actual image inside of it?

Thanks again for your help!

4

Hey @AbelHaynes,

Unfortunately it’s not possible to adjust the height of the button (past the normal size), even when the button text is too long to fit it won’t wrap to increase the buttons size.

As for the link opening a Modal, I can’t think of any way to do that.

In this case, I would suggest either using the frame component to build the part of the page that contains all 4 clickable images, or you may wish to consider building your app using Custom UI.

Cheers!
Mel

5

Hi @AbelHaynes , this should be possible with wrapping your Image component with the Pressable component: https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/

It will perform like a button but gives you more flexibility with styling.

6

Oh nice call @QuocLieu - this is in preview now @AbelHaynes! Be sure to subscribe to the changelog so you’re the first to hear about changes, as this doesn’t follow our usual deprecation period for changes

7

Thank you for this! I will give this a try and see if it is the solution I am looking for.