BaseButton

Dispara uma ação. Para navegar para outra página, use um link.

Uso

• primary: a ação principal da tela. No máximo um por área.
• secondary: ações de apoio ao lado da principal.
• ghost: ações de baixo peso, como cancelar ou ver mais.
• danger: ações que apagam ou não têm volta. Peça confirmação antes.
• O texto é um verbo que diz o que acontece: "Salvar contrato", não "OK".

Anatomia

1. Fundo e borda: a cor vem de kind (primary, secondary, ghost ou danger) e a altura, de size.
2. Ícone: opcional, de icon, antes do texto.
3. Texto: o slot padrão ou o label. Com icon-only, o texto sai da tela e o label vira a dica do mouse e o nome para o leitor de tela.
4. Indicador de carregamento: com loading, um círculo girando toma o lugar do texto.

Estados

Use loading enquanto a ação roda. O botão continua no foco do teclado, mas ignora cliques.

Tamanhos

Tipos em formulário

Observação do fiscal (opcional)

Nada enviado ainda.

O padrão é type="button": o clique não envia o formulário em volta. Use type="submit" só no botão que envia o formulário e type="reset" só quando limpar todos os campos de uma vez faz sentido; numa tela com v-model, trate o evento reset do formulário para limpar os valores.

Faça e não faça

Faça	Não faça
Escreva o que acontece: "Aprovar medição", "Salvar contrato".	Escreva "OK", "Confirmar" ou "Clique aqui".
Deixe um só primary por área, como "Enviar medição" no fim do formulário.	Ponha dois primary lado a lado: a pessoa não sabe qual é a ação principal.
Use danger para excluir um contrato e peça confirmação antes.	Use botão para abrir outra página. Para navegar, use BaseLink.

Estilo

Propriedade	Token
Fundo primário	--tj-interactive, hover --tj-interactive-hover, pressionado --tj-interactive-active
Texto sobre cor	--tj-text-on-color
Borda do secundário	--tj-border-strong-01
Foco	contorno sólido de 2 px em --tj-border-interactive, afastado 2 px, mais o halo --tj-ring (3 px)
Raio	--tj-radius-md (8 px)
Altura	--tj-control-sm/md/lg (32, 40, 48 px)

Código

<BaseButton kind="secondary" icon="download" @click="exportReport">Exportar</BaseButton>
<BaseButton icon="trash" icon-only label="Excluir contrato" kind="danger" />

Propriedades

Propriedade	Tipo	Padrão	Descrição
kind	'primary' | 'secondary' | 'ghost' | 'danger'	'primary'	Peso visual da ação
size	'sm' | 'md' | 'lg'	'md'	Altura do botão
type	'button' | 'submit' | 'reset'	'button'	Tipo HTML; nunca envia formulário sem pedir
disabled	boolean	false	Desabilita o botão
loading	boolean	false	Mostra progresso e ignora cliques
icon	string	—	Nome do ícone do Bootstrap Icons, sem bi-
iconOnly	boolean	false	Só o ícone; exige label
label	string	—	Texto, ou nome acessível quando iconOnly

Evento: click.

Acessibilidade

• Segue o padrão Button do WAI-ARIA APG.
• É um <button> nativo: Enter e Espaço acionam, e ele entra na ordem do Tab.
• Com iconOnly, o label vira aria-label e a dica do mouse. O ícone fica escondido dos leitores de tela.
• Com loading, o botão recebe aria-busy="true" e continua focável, para o usuário não perder o lugar.
• O foco aparece como um contorno sólido de 2 px em --tj-border-interactive, com 3:1 ou mais sobre o fundo nos dois temas. O anel translúcido --tj-ring fica por fora, só como reforço.
• Testado com axe em todos os tipos.

Teclado:

Tecla	O que faz
Tab	Leva o foco ao botão. Desabilitado, o botão sai da ordem do Tab.
Enter	Aciona o botão. Com loading, não faz nada.
Espaço	Aciona o botão. Com loading, não faz nada.