There’s been some amazing updates lately so huge kudos to the team!
When will it be possible to add an image (rather than an icon) to the button element?
I’ve been using div’s and image elements to create my own buttons, but with custom components now I’ve started to clean things up. I’ve had no luck being able to assign a type=“button” attribute to my divs and therefore limits them from being used within Form elements and attaching a workflow to trigger on submit, as the custom button isn’t detected properly. It seems like I’m going against best practices here and creating an unnecessary workaround.
I’d submitted as a feature request a long time ago but thought it would be an easy win.
I’d greatly appreciate the option to bind the current ‘icon’ property within the existing Button element to an image!!
HI @MichaelLovell,
what is your usecase?
type=“button” is used to detect button, but if you want them to trigger a submit in a form, you need to have type=“submit”.
Long and the short of it - i find the existing icon library too limiting and I had a mess of a time early on trying to import my own icons so I gave up. Others have created threads on that topic so I’ll leave that issue.
My use case is - I wanted more customization with buttons so I proceeded to create my own ‘buttons’ just using divs so I could include an image element within it and reference an icon from my own cdn. On some of my ‘buttons’ I also include a small loader element nested inside the divs to achieve the loading effect. (The new Starter Kit demonstrates the similar effect but I see that it is using an icon and an animation (a feature which has yet to be released)).
At the moment, I trigger workflows on click of the button because changing the attributes to type button and submit still doesn’t work with the on submit trigger.
If I manipulate the html tag directly in the DOM (from div to button) I get the expected behaviour and the on submit trigger works.
For a long time we blocked having element inside button because of prerendering. It was considered incorrect HTML, and prerendered pages broke when page was hydraded.
We made some update on this, and check if this is available now.
Here is a hack, do not know how much it will work, but you can add the attribute tag, with the value button and it should work. When i tried the editor crash temporaly (because tag was bind to something empty for a second, so maybe first fill the value, then the attribute name). Everything was working on the refresh. Does it change the HTML to what you want?
