Forge UI - Button with Link?

With Forge UI kit components I’d like to place a button with a link. e.g. <Button text="Sample subtle-link" appearance="subtle-link" />

But it seems it is not possible:

  • Button doesn’t accept links. (despite there is a prop “appearance=link”)
    With onClick={} I wasn’t available to jump to another page.
  • Links are available only as “formatting option” in the Text component.

Did I miss something?
Probably I have to use Custom UI :frowning_face:
IMHO a Button with Link option should be possible in Forge UI. Like it is available at Atlassian Design (see option href)

2 Likes

Hi @FranzBinder,

I tested the ability to create a button with a subtle-link appearance and it worked. It was styled as a subtle link and my onClick() event handler was invoked when I clicked on the link.

Note that despite being able to make a Button look like a link, they are different. Links are for navigating between locations and buttons are for triggering/handling events.

Regards,
Dugald

1 Like

We are missing this functionality as well and have created FRGE-225 - Allow Button working as Link (or Link styled as Button) as a suggestion/request for it.

1 Like

Thanks @dmorrow for your swift test!

Sure, the button itself worked with all the different appeance-options.
I was wondering why there is no href option.

How could I do this using onClick={...} ? I would be curious to know to know how this works.:pray:

I agree as well that buttons are mostly used for triggering actions. But partly also for navigation.
Atlassian uses this as well:
getstarted

Hi @FranzBinder,

I don’t know of a technical reason why the Button component couldn’t be enhanced to support a href attribute. It is possibly just a feature gap that hasn’t been prioritised yet. Would you be able to add a comment to FRGE-105 explaining the need for this and why creating a regular link using the Text component is insufficient.

Regards,
Dugald

4 Likes

Thanks @dmorrow,

done!

BR,
Franz

1 Like

Hi @FranzBinder, thanks for the feedback. We have navigation with handlers (such as Button’s onClick) planned for upcoming work.

3 Likes

Hi @nhur , @dmorrow ,
are there any news regarding this topic?

Cheers,
Franz

Hi @FranzBinder, we’re working on rolling out this navigation to Custom UI and discussed unifying this with UI Kit, but we haven’t started any work there.

Thanks @nhur !
From my point of view it not necessary to have a common solution for Forge UI and Custom UI (router…).
For Forge UI it can be a simple href option.

I hope the work can start soon :pray: !
For such small things Forge UI is much better and the end user has not that bad experience with large areas (viewport size topic).

@FranzBinder Thanks for your feedback and patience — we should be rolling out an href option soon. It is a small change but I think we were trying to think about routing more.

Hey @nhur , @dmorrow,
any news about this topic? It’s already ~6 weeks since your statement. :wink:

Hey @FranzBinder, we’re rolling out changes to the Link component to act as a Button - expect docs for this shortly!

2 Likes

Just an update: changes to the Link component (new props: appearance, and openNewTab) have been rolled out (and useable) everywhere except Confluence macros due to upgrading delays. We’ll release documentation once that is complete.

2 Likes

Hi all, thanks for your patience! The documentation for this feature will be out later today but if you’re feeling adventurous, Link has two new props appearance and openNewTab which you can use enow.

The original delay was due to deployment blockers that meant that only macros didn’t have support for this (for over a month).

3 Likes

Quick links for visitors from the future:
Release announcement
UI Kit Link docs

Again, thanks for your patience — our team has changed the way we handle feedback so requests like these should get bubbled up and decided on faster.

1 Like

@nhur Do you know if this is supposed to be supported in UI Kit 2?

1 Like