Componentes

Botão

Três variantes com hierarquia distinta. Cada tela deve ter no máximo um botão Filled — ele representa a ação principal e deve ser imediatamente reconhecível.

Visão geral

Filled

Ação principal. Apenas um por tela.

Secondary

Ação alternativa de mesma importância.

Ghost

Ações de menor peso: cancelar, voltar, descartar.

Anatomia

Adicionar disco

Álbum

Kind of Blue

Artista

Miles Davis

Ano

1959

Container

rounded-xl (12px) · altura mínima 44px · py-3 px-5 · transição 0.15s

Ícone (opcional)

16×16 px · Lucide, stroke 2 · mr-2 · mesmo fill/stroke do label

Label

Inter 14px / font-bold (Filled) ou font-semibold (Secondary) · linha única

Variantes

Filled

Quando usar

Ação principal de uma tela: salvar, confirmar, adicionar. Deve existir no máximo um por contexto imediato.

Classes

bg-[#C8F53C] text-[#0f0f0f]
font-bold rounded-xl py-3 px-5
active:opacity-70 active:scale-[0.98]
disabled:opacity-40 transition

Secondary

Quando usar

Ação alternativa com importância similar à principal. Pode coexistir com Filled em pares (ex: Salvar / Importar).

Classes

bg-[#0f0f0f] text-[#f5f5f5]
font-semibold rounded-xl py-3 px-5
active:opacity-70 active:scale-[0.98]
disabled:opacity-40 transition

Ghost

Quando usar

Ações de saída ou descarte: cancelar, voltar, fechar. Não deve competir visualmente com Filled ou Secondary.

Classes

text-[#888] font-medium
py-3 px-2
active:opacity-70 transition

Estados

Enabled

Estado padrão. Nenhum modificador aplicado.

Active

active:opacity-70 · active:scale-[0.98] · duração 0.15s

Spinner Lucide 14px + label "Verbo + -ando". Botão fica opacity-70 e cursor-wait enquanto aguarda.

Disabled

disabled:opacity-40 · cursor-not-allowed · sem interação

Do / Don't

Faça Um Filled por contexto. Ações paralelas usam Secondary.

Evite Dois Filled lado a lado criam ambiguidade sobre qual é a ação principal.

Remover da coleção?

Faça Ghost para ações de saída. Filled para a ação que avança o fluxo.

Remover da coleção?

Evite Filled no "Cancelar" inverte a hierarquia — o usuário vai pressionar a ação errada.

Faça Ícone + label. O texto garante clareza mesmo se o ícone não for reconhecido.

Evite Botão Filled só com ícone não tem tooltip e pode ser ambíguo. Use icon button separado para ações secundárias.

Specs

Propriedade	Filled	Secondary	Ghost
Altura mínima	`44px`	`44px`	`44px`
Padding	`py-3 px-5`	`py-3 px-5`	`py-3 px-2`
Border radius	`rounded-xl` · 12px	`rounded-xl` · 12px	—
Background	`#C8F53C`	`#0f0f0f`	transparente
Cor do texto	`#0f0f0f`	`#f5f5f5`	`#888`
Font size	`14px`	`14px`	`14px`
Font weight	`700` (bold)	`600` (semibold)	`500` (medium)
Active	`opacity-70 scale-[0.98]`	`opacity-70 scale-[0.98]`	`opacity-70`
Disabled	`opacity-40`	`opacity-40`	`opacity-40`
Transição	`opacity 0.15s, transform 0.15s`
Ícone (opcional)	Lucide · `16×16 px` · stroke 2 · `mr-2`