What should you do if you need a smaller button style whenever those buttons are placed in the header? Do you make a new class or a new custom button modifier? Harry Roberts tackles this problem in the following post on modifying components when they’re inside another component:
If you need to change the cosmetics of a UI component based on where it is placed, your design system is failing. It’s as simple as that. Things should be designed to be ignorant; things should be designed so that we always just have ‘this component’ and not ‘this component when inside…’.
The problem here isn’t ‘How do we style this?’, it’s ‘Why has this been designed like this in the first place?’. Put another way, the problem here doesn’t exist in code, it exists in design.
The design issue here is solved by subtly inverting the problem: instead of saying “The buttons need to be smaller when they’re in the header“, we need to be saying “We have a smaller variant of our buttons, and it’s these that we use in the header.“
In other words, a design system where the parts are purposefully ignorant of each other.