Designing for a combo link, with an icon and text, with the icon opening in a new tab

psten00 · 2024-07-25T20:23:02.238Z

I have a design of a link where both the text and icon are clickable, but the icon opens the text in a new tab.

It looks great when it’s one line:

But when it gets smaller and starts to wrap, I’m having issues.

I saw I could add an icon using bbcode to the text, which would solve the in-line issue, but then how would I ensure that the icon opens in a new window?

Any other ideas?

pj1 · 2024-07-25T22:47:17.136Z

if the icon is within the text to become one element, you won’t be able to assign them varying actions (same tab vs. new tab).

what kind of issues are you having when the line starts to wrap? how does it appear? messing with the group’s width settings will probably accomplish what you’re trying to do.

side note, i don’t necessarily like the design choice: if i saw the icon at the end of that link, i’d always assume the whole link would open in a new tab upon click anyways

psten00 · 2024-07-25T23:23:34.048Z

I can get it to wrap, but then the icon only has the option to stretch to fit, or sit at the end at the top, middle, or bottom, which looks a little odd when the green hover is activated. Ideally it would tuck in and sit at the end of the text, but may need to rethink it.

pj1:

side note, i don’t necessarily like the design choice: if i saw the icon at the end of that link, i’d always assume the whole link would open in a new tab upon click anyways

Any ideas on a solution? Having two buttons next to each other wasn’t amazing - this was my attempt to find some middle ground.

(It’s a b2b app, so the thinking was that once a user interacted with it in their training, they’d understand)

pj1 · 2024-07-25T23:44:40.923Z

Actually I was wrong. You can have links with different behaviors. Wrap the arrow image in a bbcode link (easily done with rich text editor) and it will by default open in a new tab. to open a link in the same tab, place the parameter:

target=“_self”

system · 2024-10-03T20:23:52.493Z

This topic was automatically closed after 70 days. New replies are no longer allowed.