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".

Estados

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

Tamanhos

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="exportar">Exportar</BaseButton>
<BaseButton icon="trash" icon-only label="Excluir contrato" kind="danger" />

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

• É 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 com um anel de 3 px de contraste mínimo 3:1.
• Testado com axe em todos os tipos.