frontend/docs/components.md

Design System — Componentes Base

Componentes em src/components/base/. São a base de toda a UI — sempre prefira esses componentes a elementos HTML nativos.

---

BaseButton

Arquivo: src/components/base/BaseButton.vue

Botão com suporte a variantes, tamanhos e estado de carregamento.

Props

Prop	Tipo	Padrão	Valores aceitos
variant	String	"primary"	"primary" · "secondary" · "ghost" · "danger"
size	String	"md"	"sm" · "md" · "lg"
type	String	"button"	"button" · "submit" · "reset"
disabled	Boolean	false	—
loading	Boolean	false	Exibe spinner e bloqueia cliques

Variantes

Variante	Uso
primary	Ação principal da tela (submit, confirmar)
secondary	Ação secundária, menos destaque
ghost	Ação discreta, sem borda ou fundo visível
danger	Ações destrutivas (excluir, revogar)

Exemplos

<BaseButton>Salvar</BaseButton>

<BaseButton variant="secondary" size="sm">Cancelar</BaseButton>

<BaseButton variant="danger" :loading="salvando" @click="excluir">
  Excluir
</BaseButton>

<BaseButton type="submit" :disabled="!formValido">Enviar</BaseButton>

---

BaseInput

Arquivo: src/components/base/BaseInput.vue

Campo de texto com suporte a label, hint e mensagem de erro. Compatível com v-model.

Props

Prop	Tipo	Padrão	Descrição
modelValue	String	""	Valor do campo (use com v-model)
label	String	""	Rótulo exibido acima do input
hint	String	""	Texto de ajuda abaixo do campo
error	String	""	Mensagem de erro (substitui hint quando preenchida)
id	String	""	ID do input; gerado automaticamente se omitido

Aceita todos os atributos HTML nativos de <input> via v-bind="$attrs" (ex: placeholder, type, autocomplete).

Exemplos

<BaseInput v-model="nome" label="Nome completo" placeholder="Ex: João Silva" />

<BaseInput
  v-model="email"
  label="E-mail"
  type="email"
  hint="Usado para login no sistema"
  :error="erros.email"
/>

<BaseInput v-model="senha" label="Senha" type="password" />

---

BaseBadge

Arquivo: src/components/base/BaseBadge.vue

Chip/etiqueta para exibir status, categorias ou contadores.

Props

Prop	Tipo	Padrão	Valores aceitos
variant	String	"default"	"default" · "success" · "danger" · "info" · "warning" · "violet"

Variantes

Variante	Cor	Uso sugerido
default	Cinza	Status genérico, neutro
success	Verde	Ativo, aprovado, concluído
danger	Vermelho	Inativo, erro, bloqueado
info	Azul	Informação, em andamento
warning	Âmbar	Alerta, pendente
violet	Violeta	Destaque especial, admin

Exemplos

<BaseBadge variant="success">Ativo</BaseBadge>

<BaseBadge variant="danger">Inativo</BaseBadge>

<BaseBadge variant="violet">Admin</BaseBadge>

<BaseBadge>Padrão</BaseBadge>

---

Skeletons

Pasta: src/components/skeletons/

Componente	Uso
SkeletonConversation.vue	Placeholder de item de conversa na sidebar
SkeletonDocumentCard.vue	Placeholder de card de documento na listagem

Exibidos durante o carregamento assíncrono, substituídos pelo conteúdo real quando os dados chegam.