Dismiss

Botão circular só com o ícone de fechar (Close_MD). É o mesmo X usado no Alert, no Alert Dialog, no Dialog, no Toast, no Offcanvas e no painel da Sidebar no celular, então use-o quando montar um painel, card ou aviso próprio que precise de um botão de fechar.

Exemplos

Básico

Tamanhos

sm mede 28×28 com ícone de 16px e é o padrão, usado no X de todos os componentes. md mede 40×40 com ícone de 20px.

Nome acessível

O botão não tem texto visível, então o nome lido pelo leitor de tela vem de label (padrão "Fechar"). Troque quando houver mais de um X na tela ou quando o contexto pedir algo mais claro.

Sua sessão expira em 5 minutos.

Com o Close do Radix

Para fechar um Dialog ou Offcanvas montado à mão, passe o Dismiss como filho do DialogClose ou do OffcanvasClose com asChild. O Close repassa o clique, o type e o data-slot para o botão.

page.jsx

import { DialogClose, Dismiss } from "@medway-ui/core";
 
<DialogClose asChild>
  <Dismiss className="absolute right-[18px] top-[18px]" />
</DialogClose>

API

Propriedade	Tipo	Padrão	Descrição
size	"sm" \| "md"	"sm"	`sm` tem 28×28 com ícone de 16px; `md` tem 40×40 com ícone de 20px.
label	string	"Fechar"	Nome acessível do botão (`aria-label`).
children	React.ReactNode	`<CloseMd />`	Troca o ícone padrão. O tamanho do ícone segue o `size`.
type	"button" \| "submit" \| "reset"	"button"	Tipo do botão. Por padrão não envia formulários.
className	string	-	Classes CSS mescladas com as do componente, por exemplo para posicionar o botão.
...props	React.ComponentProps<"button">	-	Aceita todas as props nativas de `button`, inclusive `ref`. Com `disabled`, o ícone fica em `gray-foreground-muted` e o botão não responde ao clique.

Diretrizes de uso

Use um Dismiss por superfície, no canto superior direito, a 10px da borda em avisos compactos (como o Alert) e a 18px em painéis e diálogos, para o centro do X de 28px ficar alinhado ao título.
Prefira os componentes que já trazem o X (Alert com onClose, DialogContainer, AlertDialogContent com showCloseButton, OffcanvasContent, ToastClose) antes de montar um à mão.