Close button

Un objetivo de cierre de 48px alrededor de un ícono de 20px, a 8px del borde.

Panel content

Instalación

$ pnpm dlx shadcn@latest add @ssntl/close-button

Uso

tsx

import { CloseButton } from "@/components/ui/close-button"

<div className="relative rounded-lg …">
  <CloseButton label="Cerrar" className="absolute end-2 top-2" onClick={cerrar} />
</div>

Un objetivo de 48px alrededor de un ícono de 20px: el área de toque es el botón, no el glifo.
A 8px del borde del contenedor. En un contenedor rounded-lg (32px) las curvas quedan concéntricas: 24 + 8.
label es el nombre accesible: “Close” por defecto; usa “Cerrar” o “Descartar” en español.

Código

components/ui/close-button.tsx

import * as React from "react"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/registry/ssntl/ui/button"

// A 48px target around a 20px icon, never a bare 16px glyph. Place it 8px
// from the container's edge: enough room for a thumb, still clearly attached.
function CloseButton({
  label = "Close",
  className,
  ...props
}: Omit<React.ComponentProps<typeof Button>, "size" | "children"> & {
  /** The button's accessible name. */
  label?: string
}) {
  return (
    <Button
      data-slot="close-button"
      variant="ghost"
      size="icon"
      aria-label={label}
      className={cn("px-0", className)}
      {...props}
    >
      <X strokeWidth={1.6} />
    </Button>
  )
}

export { CloseButton }