Button

Dispara uma ação: salvar, publicar ou iniciar uma tarefa.

O Button é o controle de ação padrão do Admin. Para navegar entre telas, prefira um Link. A fachada @rastreio-x/ui reexporta o botão do HeroUI v3 com o acabamento Mouve do tema: pílula, foco azul e encolhimento ao pressionar.

import { Button } from "@rastreio-x/ui";

Padrão

O rótulo é um verbo mais o objeto, em Title Case curto: "Publicar Marca", nunca "OK".

Playground

Troque as propriedades e veja o botão e o código mudarem juntos.

Controles

variant

size

isDisabled

isPending

fullWidth

Conteúdo

import { Button } from "@rastreio-x/ui";

<Button>Publicar Marca</Button>

Variantes

Sete variantes. A primária marca a ação principal da região; as demais baixam o peso. danger e danger-soft são só para ações destrutivas.

Variante	Quando usar
`primary`	A ação principal da região, uma por vez.
`secondary`	Ação alternativa de peso médio, como salvar rascunho.
`tertiary`	Ação de apoio, com fundo discreto.
`outline`	Ação que precisa de limite visível sobre fundo vazio.
`ghost`	Cancelar, voltar e ações de baixa prioridade.
`danger`	Ação destrutiva já confirmada, como excluir.
`danger-soft`	Ação destrutiva de menor peso, em listas e diálogos.

Tamanhos

Três tamanhos: sm, md (padrão) e lg. O raio é sempre em pílula.

Com ícone

Ícones entram como filhos, antes ou depois do rótulo, e levam aria-hidden, porque o rótulo já diz a ação. Use os ícones de @rastreio-x/ui/icons.

Só ícone

Com isIconOnly o botão vira um quadrado em pílula e precisa de aria-label.

Estados

Desabilitado

Explique o motivo perto do botão: um botão cinza sem explicação trava a pessoa.

Faltam o logo e o nome da Marca para publicar.

Carregando

isPending bloqueia novos cliques e mantém o tamanho do botão, para o layout não pular. Troque o rótulo para o gerúndio ("Publicando").

Largura total

Em formulários estreitos e no celular, fullWidth faz o botão ocupar a coluna.

No Admin

Na barra de ações do editor de Marca há uma ação primária e as demais descem de peso.

Anatomia

O botão é uma peça só. Ícone opcional à esquerda ou à direita, o rótulo e, durante isPending, o estado de carregamento no lugar do clique.

Button

Propriedades

Button
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`children`	`ChildrenOrFunction<ButtonRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<ButtonRenderProps>`	`'react-aria-Button'`	Classes CSS aplicadas ao elemento.
`excludeFromTabOrder`	`boolean`	-	Tira o elemento da ordem do Tab. Evite, salvo quando há outro caminho pelo teclado.
`form`	`string`	-	Id do `<form>` ao qual o elemento está associado.
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>)`	-	URL ou função que processa o envio; sobrescreve a ação do formulário.
`formEncType`	`string`	-	Codificação dos dados enviados pelo formulário.
`formMethod`	`string`	-	Método HTTP do envio do formulário.
`formNoValidate`	`boolean`	-	Desativa a validação nativa do formulário no envio.
`formTarget`	`string`	-	Janela de destino do envio; sobrescreve a do formulário.
`fullWidth`	`boolean`	-	Ocupa toda a largura disponível.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isIconOnly`	`boolean`	-	Botão só com ícone, em formato quadrado: exige `aria-label`.
`isPending`	`boolean`	-	Estado de carregamento: bloqueia novos cliques, mantém o foco e anuncia o estado a leitores de tela.
`name`	`string`	-	Nome do campo enviado com o formulário.
`onPress`	`((e: PressEvent) => void)`	-	Chamada ao soltar o clique, o toque ou a tecla sobre o elemento.
`preventFocusOnPress`	`boolean`	-	Impede que o foco vá para o elemento ao pressioná-lo. Pode prejudicar a acessibilidade.
`render`	`DOMRenderFunction<'button', ButtonRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`size`	`'lg' \| 'md' \| 'sm'`	-	Tamanho do botão: `sm`, `md` (padrão) ou `lg`.
`style`	`StyleOrFunction<ButtonRenderProps>`	-	Estilos em linha aplicados ao elemento.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Comportamento no formulário: `button` não envia, `submit` envia e `reset` limpa. Padrão `button`.
`value`	`string`	-	Valor atual (controlado). Em campos de formulário, é o valor enviado.
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'outline' \| 'ghost' \| 'danger' \| 'danger…`	-	Peso visual do botão: `primary` (ação principal), `secondary`, `tertiary`, `outline`, `ghost` e, só para ações destrutivas, `danger` e `danger-soft`.

Animações

CSS
indicativo

O fundo muda de tom no hover; ao pressionar, o botão encolhe um pouco (scale) e o anel de foco azul aparece só com o teclado. Tudo dura entre 150 e 250 ms e usa opacity, transform e cor. Com prefers-reduced-motion, a folha global da fachada reduz transições a 0,01 ms: ficam as trocas de cor, sem encolhimento.

Nenhum clique ainda

Acessibilidade

É um <button> nativo: Tab foca, Enter e Espaço acionam (onPress cobre mouse, toque e teclado).
O anel de foco aparece só com o teclado e mantém 3:1 de contraste contra a superfície.
isDisabled usa aria-disabled; isPending anuncia o estado ocupado e ignora novos cliques.
isIconOnly exige aria-label; o estado nunca depende só da cor.

Boas práticas

Faça

Um botão primário por região da tela, com rótulo de verbo: Publicar Marca.

Evite

Dois botões primários lado a lado, ou rótulos genéricos como OK e Confirmar.

Um botão primário por região da tela; o resto desce de peso.
Rótulos de verbo no infinitivo e Title Case curto: "Publicar Marca", "Salvar Rascunho".
Use danger só para ação destrutiva, e confirme antes com AlertDialog.
Não desabilite sem explicar: mostre o motivo perto do botão.
Para navegar, use Link; botão dispara ação.

Relacionados

Tooltip para explicar botões só de ícone.
AlertDialog para confirmar ações destrutivas.
Modal e Sheet para agrupar ações em torno de uma tarefa.