How do I add the same hover state to all of my buttons on Adobe XD?

Question

I have several buttons throughout my document that say different things, such as 'contact us' and 'add to basket'. I initially made a 'button' a component to keep padding etc consistent, so I could drag the button onto the canvas and override each button when I change the text. However, when I add a hover state to the master component, applying to all buttons, the button that says 'contact us' for example will then say 'button' when I hover over it, due to my master component saying 'button'.I have been in a google search all morning but cannot find a solution, do I have to individually add states to each button that has different text? So for example the 'contact us button' and 'add to basket' buttons be treated as their own components with their own hover states added? Sorry if this doesnt make sense, i'm new to XD this week and really struggling to put this one into words!

Jagriti_Kashyap · Accepted Answer

Hi Jodiiejode,

My understanding of your issue is you want to have a hover state in each of your overriden instance but the hover state should have the text of the overidden instance. If my understanding of your issue is correct you can try the given steps to achieve it.

create a component with text (button in urs case)
create instances of it and override the text as per choice
go back to master component, create a hover state with the desired text (say text2)
In the overidden instances, go to hover state, text2 will be seen. If you want any different text even in the hover state you need to overide the text2 in the hover state of the overiden instances.

MR A · Answer

this is a bit of a shame i think;  would be nice if this was somehow integrated directly and automatically

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.