Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


How to handle many button variants?

New Here ,
Jun 28, 2021 Jun 28, 2021

Copy link to clipboard

Copied

I use Bootstrap, which has several variations for button styles. It comes with 9 different button colors--a "primary" one that matches a brand color, one for representing "success" type messages, one for representing "error" type messages, one for representing "warning" type messages, and so on. There are also three different button sizes--small, medium (the default) and large. There are also "outline" versions of each color and size but for simplicity's sake let's forget about that for now.

 

What I want to do in XD is have three main components (one for each button size) that can handle all those button colors. I'm learning XD and I thought I could do this by just having a main component with the default button color, then copy/paste that component (i.e. make an instance of that component) and change the background/text/padding for each of the variants--a component instance for a large primary button, a component instance for a small warning button, etc. That was fine until I realized the only button that would show up in Libraries > Document Assets > Components was the main component button.

 

So I tried to achieve something acceptable by creating a component that's just the button background so I could have the different colors as states--a primary state, a success state, etc. That way I could have my 3 main components for button sizes and use the same background component across all of them. That didn't work because I discovered you can't have a component as a "background" when you want to use padding, and I want to use padding. Even if it did work, I'd have to have 9 different states, plus 9 more for each hover state, and another 9 for any other states I want to use (maybe disabled, active, etc.)

 

So now what do I do? Do I make a main component with 18+ states, and two more components like that for the small and large sizes? That would be ok-ish if I didn't have to do that all over again for the small and large button sizes because apparently, you can't duplicate a main component as another separate main component, which means I'd have to re-create all 18 states from scratch, twice.

 

I just want to be able to make changes in fewer places. Say I have a main component for each button size (so 3 components), and I need to change the primary button background color, plus its hover background color. That means I need to make that change in 6 places--once for 3 default states, and once for 3 hover states. Or, say I have a main component for each button color (so 9 components) and I need to change the padding on the large button size. If I'm not mistaken, I'd have to make that change at least 9 times, possibly more since it seems like padding changes you make to the default state don't get carried over to existing states.

TOPICS
Design, How to

Views

143

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

LATEST

Hi there,

 

Thank you for reaching out and sorry for the delay in response. Could you please check out this UserVoice once to see if the requirements match your workflow?

 

I am also keeping the discussion open for our experts if they might have any advice for you.

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines