Design System

Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.

Componentes

Badges e status

Badges sólidos para ênfase e suaves para status em tabelas.

Sólidos

Para ênfase pontual, fora de tabelas.

defaultsuccesswarningdestructiveinfopurple

Suaves (status)

Padrão para status em tabelas: Conforme, Divergência, Não analisado, Processando.

Conforme DivergênciaNão analisadoProcessandoPendenteAtual

variant="primary-soft"

Exemplo

variant="success-soft"

Exemplo

variant="warning-soft"

Exemplo

variant="info-soft"

Exemplo

variant="destructive-soft"

Exemplo

variant="neutral-soft"

Exemplo

variant="outline"

Exemplo

Tamanhos

size="sm"

Conforme

size="md"

Conforme

size="lg"

Conforme