Close button

A 48px close target around a 20px icon, placed 8px from the edge.

Panel content

Installation

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

Usage

tsx

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

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

A 48px target around a 20px icon: the hit area is the button, not the glyph.
8px from the container's edge. In a rounded-lg (32px) container that makes the curves concentric: 24 + 8.
label is the accessible name: “Close” by default; say “Dismiss” or “Close dialog” when it is clearer.

Code

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 }