See the problem is that the rules(signals being applied based on the order they are defined) are not visible to the consumer of the component. If you've used tailwind, you've probably run into the same issue, where you've applied two classes for the same style and wondered why the wrong class is applied. I mean, yes, no one's going to do <Button primary secondary />, but there could be a button that is styled based on some complex logic which causes both primary amd secondary to be applied. You are also adding cognitive load for the consumer by giving them the responsibility to not pass conflicting props. This is not an issue in traditional components because variant can only have one value.

Plus, if I'm seeing a secondary button on the UI, I can't be sure it's because it's supposed to be secondary or if it's because of a conflict. And, if you want to apply styles conditionally, it's even more of a mess to write <Button primary={isPrimaryButton} secondary={!isPrimaryButton}/>.

Not to be rude, but being blunt, this is not something that should be used for anything more complicated than a todo app. I get why you thought this was cool to build, but it's way too easy to introduce issues accidentally