I’m running into this problem more and more. Sometimes I have a button, a link, a dropdown menu item, which either leads to a specific url (and thus should be <a href="..."> tag), or a button that interacts with the page (and thus should be a <button> tag).
Unfortunately I currently can’t use “dynamic value” for tag attribute. Nor can I use the same “content slot” twice.
So every time I end up with such scenario, I have to either:
avoid using content slots (so that link/button label is defined with prop)
copy & paste the inner content twice, and toggle visibility of it depending on e.g. whether a href/url prop is present
use just one of the tags and alter browser behaviour (e.g. always use anchor, but add tabindex=0 and trigger mouseclick when one presses Enter on keyboard on it)
Any idea if this could be simplified in Plasmic Studio? (Without creating a code component.)
E.g. If I could render the same content slot twice, I could encapsulate that "show anchor if url is present, otherwise show button) logic in a custom component.
Or if the tag could be dynamic, that would simplify things too.
Or maybe we could have a built-in Plasmic component that does this “button or anchor” thing.
The built-in headless button component already has this behavior built in, where it switches between being a link or a button depending on whether a destination URL has been passed in as a prop.
You can customize this headless button components to be designed however you want.
If you are inside of a project that has authentication enabled, then you can find this button by enabling The headless design system first in the insert menu
You can also create as many such button components as you’d like. You can create them by going to the project page / component dropdown in the top toolbar, and creating a new component. From there you can select the component template you want to start from, which includes button.
Didn’t know that the “Button” interactive component template has some hidden “power” that I can’t achieve using “normal” means. So let me just confirm - whenever I want to have such a “link or button” element, I need to create it first as a separate component using the following interface:
