Improve discoverability of share feature

[abidlabs]

The share icon in our Chatbot, Image, etc is very small and hard to discover if you don't already know about it, e.g see:

This needs some designing, but it would be great if we could make it more prominent in 5.0 to encourage more Hub sharing features (cc @osanseviero)

[gsbm]

Hi, if I can suggest an idea: The share button could be bigger but hidden, until hovering the output. With a slight animation (the button coming from the side, for example), revealing the button, it would make it more noticiable by the user eyes (by it size and movement), while being less intrusive as possible (hidden until hover). Moreover, the button would need a label, not just an icon, to make the call to action clearer.

[abidlabs]

Thanks @gsbm for the suggestion! Two reasons I hesitate:

• hovering is not very mobile friendly
• sometimes a component (e.g. gr.Image) can have multiple buttons and animating only one of them would look out-of-place. Animating all of them would be a little intrusive

I agree with adding a label, but also not clear how to do it in a way that's not intrusive

[allisonwhilden]

I wonder if part of the challenge is the fact that there are multiple corners to look for things. You see the component label on the left, may try to interact with that, and not necessarily realize there are options on the right. If you try and make the options on the right more discoverable, it could start to compete with the other content and cause a distraction as mentioned above.

As another suggestion: maybe you could consolidate the UI and give users a single, more obvious place to look and interact with? If there were some "Menu" icon next to the component label, such as three dots, it is more inline with the path users eye's generally follow down a page.

And with it being a dropdown menu, you could easily consolidate commands when some components have multiple commands (such as images), and show a full label, because you have the dropdown.