Hover state for inline links?

Hi, I have created a link component with a hover state variant, but is there a way to apply this to inline links? As in, I want to have a paragraph with a link in it, and I want to show the hover state of the link in a prototype (it’s not an actual link, this is just for a design to show how a link would look).

1 Like

I don’t think there is a way currently. Best way I’ve seen so far is still to make the link text separate from the paragraph as an instance of your link component and place it in the right place above the paragraph text.

Yeah, that’s what I thought, was hoping there was something I’d missed :frowning:

1 Like

Currently, the only good way to fake it is this method:

Combine the text paragraph and the link component(s) within an Auto Layout frame and set the link component(s) as Absolute Positioned.

You can do this with multiple components if your paragraph consists multiple Inline Links or has Links that have a line break. Just keep in mind your paragraph text needs some gaps which you can fake with hitting the Spacebar a lot.

If the text and link have an equal font size and line height you can write the link text first in the paragraph, then place the Link component to its absolute position and then replace the link text in the paragraph with spacebar whitespace until everything fits.

That is still just a workaround though but I hope it helps.
I hope that text containers will be able to float around components in the future…

3 Likes