CloseButton

Botão de fechar para dispensar avisos, painéis e diálogos.

O CloseButton é o "X" padrão para dispensar conteúdo: um aviso de duplicidade, os detalhes de um Pedido, um painel. Ele já traz o ícone e o foco da fachada. Para uma ação com texto (Cancelar, Concluir), use Button; para fechar um Modal ou Sheet, use o fechar embutido neles.

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

Padrão

Sempre com aria-label: o botão só tem um ícone.

Estados

onPress trata a ação e isDisabled bloqueia.

Pressionado 0x

Desabilitado

Em um aviso

Dentro de um Alert, ele dispensa a mensagem. Diga no rótulo qual aviso é.

Pedido retido por duplicidade

Já existe um Pedido igual desta Fonte nas últimas 24 horas.

No cabeçalho de um painel

Título à esquerda e o botão à direita, com o rótulo citando o objeto.

Pedido ped-8

Marina Souza

Anatomia

CloseButton

O CloseButton é uma peça só: um botão com o ícone de fechar (substituível pelos filhos).

Propriedades

CloseButton
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.
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`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.
`style`	`StyleOrFunction<ButtonRenderProps>`	-	Estilos em linha aplicados ao elemento.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tipo do elemento; define o comportamento nativo (em botões, `button`, `submit` ou `reset`).
`value`	`string`	-	Valor atual (controlado). Em campos de formulário, é o valor enviado.
`variant`	`'default'`	-	Variante visual do componente.

Animações

CSS
indicativo

Só há transição de cor no hover e o encolhimento ao pressionar. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms.

Acessibilidade

É um <button>: Enter e Espaço ativam, e o foco visível usa o token --focus.
aria-label obrigatório e específico ("Fechar detalhes do Pedido ped-8"), porque o ícone não tem texto.
A área de toque tem pelo menos 24 px no desktop; use className="size-11" no celular se estiver perto de outros alvos.
Ao fechar, mova o foco para um elemento que faça sentido (o gatilho do painel, por exemplo).

Boas práticas

Faça

Rótulo que cita o objeto e foco devolvido ao gatilho depois de fechar.

Evite

CloseButton sem aria-label, ou avisos importantes que só se dispensam e somem sem registro.

Em erros e avisos importantes, deixe o texto visível por mais tempo ou ofereça uma ação.
Posicione sempre no canto superior direito do contêiner.
Não coloque dois botões de fechar na mesma camada.

Relacionados

Alert para o aviso que o botão dispensa.
Modal e Sheet, que já incluem o fechar.
Button para ações com texto.