Limit override options of nested components

We’re building an atomic design system. One thing that has come up multiple times that would be really nice to have is the ability to control the variants/overrides of nested components.

For example, we have a button component that uses variants and variant properties to control button size (sm, md, lg), button state, whether it has an icon or not, etc. To keep the system atomic we then nest that button component in other components, for example, a header component. But we want to limit the header component to only accept sm buttons and not md or lg while keeping other variant attribute overrides intact like state.

Could there be a similar locking mechanism like how locking a nested component will block any overrides at all, could we somehow lock specific attributes? for example lock the variant attribute for size.

1 Like

A post was merged into an existing topic: Nested variant component override controls


This has been requested already (for the component part).
I guess having something similar to Sketch would be a start.

A post was merged into an existing topic: Locking variants/overrides

I hope this time moving the topic wasn’t a mistake… @matt23 let me know what you think.

I also think this topic title is better, I wonder if we can improve the other topic title somehow?