Olá, Luana, como vai?
Quando os botões possuem diferenças claras de função e estilo, como cores distintas indicando ações diferentes (primário, secundário, ação crítica, etc.), faz sentido organizá-los como variantes dentro de um mesmo componente. Isso mantém consistência e facilita a reutilização.
O ponto principal é separar o que é propriedade de variante do que é conteúdo editável. Texto do botão, por exemplo, normalmente deve ser uma propriedade editável, não uma variante. Já cor, estilo (preenchido, outline) e estado (default, hover, disabled) são bons candidatos para variantes.
Por exemplo, uma estrutura comum seria ter uma propriedade chamada “tipo” com valores como primário e secundário, e outra chamada “estado” com default e hover. O texto continuaria livre para edição em qualquer instância do componente, sem precisar criar uma variante para cada label.
Você pode dar uma olhada nesse projeto aqui, é um exemplo muito bom de como organizar as variantes.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado