Components

Referência rápida dos componentes oficialmente documentados. Esta plataforma não é Storybook — consulte o Figma para variantes detalhadas, medidas e handoff.

10 componentes oficiais documentados — DESIGN.md v1.2.1

Button

Oficial

Ações explícitas como avançar, salvar, confirmar, publicar ou cancelar.

Variantes: emphasis: primary, secondary, tertiary · intent: default, success, danger · size: md, sm

Não usar verde como secondary. Não confundir emphasis com intent.

Ver regras completas (18)
  • ·emphasis: `primary`, `secondary`, `tertiary`
  • ·intent: `default`, `success`, `danger`
  • ·size: `md`, `sm`
  • ·content: `label`, `leading-icon`, `trailing-icon`, `icon-only`
  • ·state: `default`, `hover`, `pressed`, `disabled`, `loading`
  • ·width: `hug`, `fill`
  • ·`emphasis` define hierarquia visual.
  • ·`intent` define significado semântico.
  • ·Não confundir `emphasis` com `intent`.
  • ·`primary` deve ser usado para a ação mais importante do contexto.
  • ·`success` deve ser usado apenas para confirmar, salvar, aprovar ou publicar.
  • ·`danger` deve ser usado apenas para ações destrutivas, rejeição crítica ou ações irreversíveis.
  • ·Não usar verde como botão secundário.
  • ·Não usar múltiplos botões primary competindo no mesmo contexto.
  • ·Usar `success` apenas porque o botão deve parecer positivo.
  • ·Usar `danger` para ações que não são destrutivas.
  • ·Usar botão icon-only sem label acessível.
  • ·Criar cores alternativas fora do Design System.

Input / Text

Oficial

Entrada curta de texto: nome, e-mail, telefone, busca simples, código.

Variantes: state: default, hover, focus, filled, disabled, error · width: fill, hug

placeholder…
Maria Arquiteta
desabilitado
maria@

E-mail inválido.

Label não deve ser substituído pelo placeholder.

Ver regras completas (18)
  • ·label;
  • ·field container;
  • ·placeholder/value;
  • ·help text;
  • ·error message;
  • ·leading icon;
  • ·trailing icon.
  • ·default;
  • ·hover;
  • ·focus;
  • ·filled;
  • ·disabled;
  • ·error.
  • ·Label não deve ser substituído por placeholder.
  • ·Placeholder deve orientar, não conter informação essencial.
  • ·`width=fill` para formulários de página.
  • ·`width=hug` apenas dentro de componentes menores ou contextos específicos.
  • ·Mensagens de erro devem ser específicas e acionáveis.

Input / Textarea

Oficial

Entradas longas: comentários, descrições, observações, respostas abertas.

Variantes: rows: 3, 5 · resize: fixed, resizable · states iguais ao Input / Text

Usar apenas para conteúdo longo. Rows 3 curtos, rows 5 extensos.

Ver regras completas (9)
  • ·rows 3;
  • ·rows 5;
  • ·fixed;
  • ·resizable.
  • ·Usar Textarea apenas para conteúdo longo.
  • ·Rows=3 para campos curtos.
  • ·Rows=5 para conteúdos mais longos.
  • ·Usar fixed para formulários estruturados.
  • ·Usar resizable quando o conteúdo for imprevisível.

Input / Select

Oficial

Escolha de uma opção dentro de lista limitada previsível.

Variantes: state: default, hover, focus, filled, disabled, error, open · width: fill, hug

Default
Selecione…
Open
Selecione…
Consultoria online
Reforma completa
Selected
Reforma completa
Error
Selecione…

Não usar para apenas 2 opções simples — preferir Radio Button.

Ver regras completas (34)
  • ·há várias opções e exibi-las todas ocuparia espaço excessivo;
  • ·a escolha é única;
  • ·a lista tem valor definido pelo sistema;
  • ·o usuário precisa selecionar uma opção entre alternativas previsíveis.
  • ·existem poucas opções visíveis e Radio Button seria mais claro;
  • ·a escolha precisa ser comparada visualmente;
  • ·o usuário precisa selecionar múltiplas opções;
  • ·a lista é muito longa e precisa de busca.
  • ·label;
  • ·trigger;
  • ·placeholder/value;
  • ·dropdown list;
  • ·option item;
  • ·help text;
  • ·error message;
  • ·trailing icon.
  • ·state: `default`, `hover`, `focus`, `filled`, `disabled`, `error`, `open`
  • ·label: `with-label`, `no-label`
  • ·help-text: `with-help`, `no-help`
  • ·value: `placeholder`, `selected`
  • ·width: `hug`, `fill`
  • ·option-type: `default`, `selected-option`
  • ·open → `[aria-expanded="true"]`
  • ·disabled → `:disabled` ou `[aria-disabled="true"]`
  • ·error → `[aria-invalid="true"]`
  • ·focus → `:focus-visible`
  • ·Label não deve ser substituído por placeholder.
  • ·O estado open deve manter continuidade visual entre trigger e lista de opções.
  • ·A opção selecionada deve ser visualmente distinguível.
  • ·Em mobile, garantir área de toque confortável.
  • ·Não usar Select como atalho para decisões complexas que exigem explicação.
  • ·Usar Select para apenas duas opções simples.
  • ·Esconder opções importantes dentro do dropdown quando a comparação visual é necessária.
  • ·Criar listas longas sem busca ou agrupamento.

Badge

Oficial

Status, categoria, contagem ou informação complementar curta. Não executa ações.

Variantes: variant: solid, subtle, outline · intent: brand, success, warning, danger, neutral · size: md, sm

brand solidbrand outlinesuccesswarningdangerneutral

Não usar Badge como substituto de Button. Usar textos curtos.

Ver regras completas (9)
  • ·variant: `solid`, `subtle`, `outline`
  • ·intent: `brand`, `success`, `warning`, `danger`, `neutral`
  • ·size: `md`, `sm`
  • ·content: `label`, `leading-icon`, `trailing-icon`, `dismiss`, `dot`
  • ·Badge não tem estados interativos.
  • ·Usar textos curtos.
  • ·Não usar Badge para CTA.
  • ·Não usar cores de feedback apenas por decoração.
  • ·Badge com `dismiss` deve ser tratado como padrão específico e validado no contexto.

Checkbox

Oficial

Seleção booleana, aceite de termos, seleção múltipla ou opções independentes.

Variantes: state: default, hover, focus, disabled, error · checked: true, false · indeterminate

Opção não selecionada
Opção selecionada
Desabilitado

Para escolha única entre opções, usar Radio Button.

Ver regras completas (13)
  • ·state: `default`, `hover`, `focus`, `disabled`, `error`
  • ·checked: `true`, `false`
  • ·indeterminate: `true`, `false`
  • ·label: `with-label`, `no-label`
  • ·helper: `with-helper`, `no-helper`
  • ·focus → `:focus-visible`
  • ·disabled → `:disabled`
  • ·error → `[aria-invalid="true"]`
  • ·indeterminate → `[data-indeterminate="true"]` ou estado equivalente no componente
  • ·Usar Checkbox quando múltiplas opções podem ser selecionadas.
  • ·Para escolha única entre opções, usar Radio Button.
  • ·Helper text deve explicar consequências ou contexto quando necessário.
  • ·Estado indeterminate deve ser usado apenas em seleção parcial de grupo.

Toggle

Oficial

Liga/desliga configuração com efeito imediato ou estado persistente.

Variantes: on: true, false · state: default, hover, focus, disabled, error · size: md, sm

Off
On
Disabled

Não usar quando a ação precisa de confirmação explícita.

Ver regras completas (9)
  • ·state: `default`, `hover`, `focus`, `disabled`, `error`
  • ·on: `true`, `false`
  • ·size: `md`, `sm`
  • ·label: `with-label`, `no-label`
  • ·helper: `with-helper`, `no-helper`
  • ·Toggle deve deixar claro o estado atual.
  • ·Label deve explicar o que será ativado ou desativado.
  • ·Não usar Toggle para ações destrutivas sem confirmação.
  • ·Não usar Toggle quando a mudança não for imediata ou persistente.

Radio Button

Oficial

Escolha única entre opções mutuamente exclusivas quando todas devem estar visíveis.

Variantes: state: default, hover, focus, disabled, error · selected: true, false

Opção A — selecionada
Opção B
Opção C — desabilitada

Não usar para múltipla seleção. Se muitas opções, avaliar Select.

Ver regras completas (11)
  • ·há poucas opções;
  • ·a comparação visual entre opções ajuda a decisão;
  • ·todas as opções devem estar visíveis.
  • ·state: `default`, `hover`, `focus`, `disabled`, `error`
  • ·selected: `true`, `false`
  • ·label: `with-label`, `no-label`
  • ·helper: `with-helper`, `no-helper`
  • ·Usar Radio Button para seleção única.
  • ·Não usar para múltipla seleção.
  • ·Se houver muitas opções, avaliar Select.
  • ·Labels devem ser claros e comparáveis.

Avatar

Oficial

Representa usuários, clientes, arquitetos ou membros do time.

Variantes: size: xs, sm, md, lg, xl, 2xl · type: image, initials, icon · color: neutral, brand, subtle

MA
xs
MA
sm
MA
md
MA
lg
icon

Usar type=initials como fallback. Avatar não tem estados interativos.

Ver regras completas (12)
  • ·size: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
  • ·type: `image`, `initials`, `icon`
  • ·color: `neutral`, `brand`, `subtle`
  • ·online: `false`, `true`
  • ·online=true: indicador verde com fill `green/700` e stroke branco de 1.5px.
  • ·neutral: usar bg/subtle e text/subtle.
  • ·brand: usar violet-primary/700 e text/on-brand.
  • ·subtle: usar violet-primary/100 e violet-primary/700.
  • ·Usar `type=image` quando houver foto.
  • ·Usar `type=initials` como fallback com iniciais do nome.
  • ·Usar `type=icon` para usuários sem identidade definida.
  • ·Avatar não tem estados interativos por padrão.

Card

Oficial

Agrupa conteúdo relacionado, organiza listas visuais ou estrutura seções.

Variantes: variant: elevated, outlined, filled · size: sm, md, lg · header, media, footer opcionais

Elevated

shadow/sm

Outlined

border/default

Filled

bg/subtle

Não é clicável por padrão. Usar radius/lg. Não usar sombras exageradas.

Ver regras completas (11)
  • ·variant: `elevated`, `outlined`, `filled`
  • ·size: `sm`, `md`, `lg`
  • ·header: `with-header`, `no-header`
  • ·media: `with-media`, `no-media`
  • ·footer: `with-footer`, `no-footer`
  • ·Usar radius/lg para todos os cards.
  • ·Card não é clicável por padrão.
  • ·Se o card inteiro for clicável, deve haver estado de foco e affordance clara.
  • ·Não usar sombras exageradas.
  • ·Não usar padding fora da escala.
  • ·Header, media e footer devem respeitar hierarquia clara.