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.
Em um aviso
Dentro de um Alert, ele dispensa a mensagem. Diga no rótulo qual aviso é.
No cabeçalho de um painel
Título à esquerda e o botão à direita, com o rótulo citando o objeto.
Anatomia
CloseButtonO CloseButton é uma peça só: um botão com o ícone de fechar (substituível pelos filhos).
Propriedades
| 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-labelobrigató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
Evite
- 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.