Variantes (Variants)

No nosso Design System, Variants são formas de organizar componentes que compartilham o mesmo propósito, mas possuem características visuais ou funcionais diferentes. No Figma, elas são organizadas em um único componente mestre; no código, elas se tornam Props.

Tipos Comuns de Variantes

• Size (Tamanho): Pequeno (Small), Médio (Medium), Grande (Large).
• Type/Variant (Tipo): Primário, Secundário, Terciário, Ghost.
• State (Estado): Default, Hover, Focused, Disabled, Loading.
• Theme (Tema): Light, Dark.

Quando criar uma Variant?

Você deve criar uma variante quando o componente mantém a mesma estrutura lógica e semântica, mudando apenas atributos visuais.

• Exemplo: Um botão que pode ter ícone ou não, ou mudar de azul para branco. Ele ainda é um "Botão".

Quando NÃO criar uma Variant?

Não force uma variante se a função do componente for drasticamente diferente.

• Exemplo: Um "Botão de Menu" que abre uma lista suspensa e um "Botão de Ação" simples podem parecer iguais, mas se o comportamento de interação e os sub-componentes internos forem muito diferentes, podem ser componentes distintos.

Diferença entre Variant e Novo Componente

• Variant: Propriedades diferentes do MESMO elemento. (Ex: Botão Vermelho vs Botão Azul).
• Novo Componente: Mudança na ESSÊNCIA ou na ESTRUTURA complexa. (Ex: Um Botão vs Um Toggle/Switch).

---

Como fazer vs Como não fazer

✅ Como fazer

• Use variantes para controlar o estado de um componente (ex: state: loading).
• Mantenha os nomes das variantes no Figma idênticos aos nomes das props no código (ex: variant: primary).
• Crie variantes de tamanho (Size) para componentes que precisam se adaptar a diferentes densidades de tela (Mobile vs Web).

❌ Como não fazer

• Criar 50 variantes para um componente que poderia ser resolvido com Slots (ex: um Card com 20 variações de conteúdo interno).
• Usar nomes genéricos como Propriedade 1, Propriedade 2. Use nomes claros como style ou size.
• Criar componentes separados como BotaoAzul, BotaoVermelho e BotaoVerde. Use o componente Button com a variante color.