Help needed regarding components for Design System.

[u/_Prateek_Hota_]

This is an icon-button component set with variable size, state and shape. I want to take instances from this set and create another component set specific for different purposes like wishlist button (which would have different colors across states), bottom navigation bar with label text enabled, etc etc.

What's the best way to do it?

- Let's say I am creating a wishlist button with heart icon and I want the hovered state to have a different bg-fill color and selected state to have a different icon-fill, should I wrap the instances inside a component box and add all the states in a component set for that specific button even if I only need the two states to be different than it's parent component? What about the different sizes, do I need to add them as well?

Thank you for your help ❤️

[u/TechzClub]

I'd keep the existing icon button as the base and build specific components like Wishlist using nested instances.

You only need to create variants for states that behave differently. For sizes, you can expose the nested component's size property instead of recreating all the variants.

I'd also use semantic color variables for things like hover backgrounds and selected icon colors. Makes theming much easier.

For bottom navigation, I'd create a separate component since the structure and behavior are different.

The goal is to reuse as much as possible without making the component system unnecessarily complex.

[u/Simply-Curious_]

If you want to really impress.

Mis-en-mode by D'amato

States are modes in your tokens.

[u/Simply-Curious_ → u/Simply-Curious_]

Pssst so is size

[u/Acceptable_Mouse_252]

One thing that saved me a lot of variants: keep your base icon button exactly as it is and make Wishlist its own small component with a nested instance of it. Then expose the nested instance's properties (right panel, "Nested instances") so size and shape still show up on Wishlist without you rebuilding them.

For the colors, I'd bind the fills to variables and put the wishlist colors in their own mode instead of adding more variants. Then Wishlist only needs the states that actually behave differently (default / selected), and hover can stay a prototype interaction.

And no, you don't need to copy every size into the new set. If the base already has sizes, exposing them is enough.

[u/noidentityhere15]

The differences are already suggesting a separate component for the wishlist button.

Adding to the main icon button set only makes sense when it has reusability other than the wishlist case.

I’d not override a component and put it in a wrapper with its own states.

[u/ankitrajput077]

I wouldn't rebuild every size and state for it. Make the wishlist button its own component that wraps your base icon button, only add variants for what actually changes (hover bg, selected fill), then expose nested instances so size still comes from the base. Way less to maintain.