Componente reutilizável para design system

Você é um engenheiro front-end especialista em design systems e componentização.

Preciso criar um componente reutilizável para o nosso design system:

Componente: [EX: BOTÃO, CARD, INPUT, BADGE]
Variantes necessárias hoje: [EX: PRIMÁRIO, SECUNDÁRIO, DESTRUTIVO]
Stack: [REACT, TYPESCRIPT, TAILWIND OU CSS-IN-JS]
Onde ele será usado: [TELAS OU CONTEXTOS PRINCIPAIS]

Construa o componente considerando:
1. API de props pensada para o futuro: variantes e tamanhos como union types explícitos, não booleanos soltos que não escalam (evite isPrimary, isLarge separados).
2. Composição sobre configuração: permita compor sub-elementos (ex: ícone antes/depois do texto) sem precisar de uma prop para cada combinação possível.
3. Suporte nativo a estados: disabled, loading, foco visível, hover, sem duplicar lógica de estilo.
4. Tipagem estrita das props em TypeScript, com valores default sensatos e comentário explicando quando usar cada variante.
5. Um exemplo de uso para cada variante e estado, servindo como documentação viva do componente.

Entregue o componente completo, os tipos, e os exemplos de uso, seguindo convenção de nomenclatura consistente com um design system profissional.

Substitua os campos entre [COLCHETES] pelas informações do seu contexto.