Todos los componentes (204)

Botón de cerrar

Capas · OverlayCloseButton

Qué es y cuándo usarlo

La equis de una capa: el diálogo, el panel lateral, la paleta, la bandeja y las notificaciones usan esta, no una cada uno.

Cuándo usarlo

Al montar una capa propia sobre Dialog o Drawer, para que su aspa se comporte como las demás. onPress es lo que cierra.
size: 24, 28 (por defecto) o 32 px de lado.

Cuándo no

Dentro de un Alert o de un GlobalAlert: esos llevan su propia equis, en el color del tono y no en el de la superficie.
Para una acción que no sea cerrar: eso es un IconButton, que obliga a ponerle nombre.

Teclado: es un <button> nativo con su parada de Tab; Intro y Espacio lo pulsan.

Accesibilidad: el label es obligatorio y es lo que se anuncia («Cerrar el diálogo»). La equis es decorativa. Se ve de 24 a 32 px, se pulsa ahí con el ratón y en 44 × 44 px con el dedo: el área de más es transparente y se sale por los lados, así que la cabecera de la capa no cambia de alto (medido: 71 px con ratón y con el dedo).

Aspecto fino: variables CSS --amset-layer-close-side (lo que se ve) y --amset-layer-close-extra (lo que se añade con el dedo). El foco es el contorno de 2 px de todos los controles.

Cómo se ve

Cliente guardado

<div className="mi-aviso">
  <p>Cliente guardado</p>
  <OverlayCloseButton label="Cerrar: Cliente guardado" size="sm" onPress={cerrar} />
</div>

Props

Se importa con import { OverlayCloseButton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	El nombre del botón para el lector de pantalla: «Cerrar el diálogo».
`onPress`obligatoria	`() => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`size`	`"sm" \| "md" \| "lg"`	24, 28 o 32 px de lado. Con el dedo, siempre 44.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: