HeroUI Close Button

Buttons 1

About

HeroUI v3 CloseButton — an accessible icon button for dismissing dialogs, drawers, alerts, chips and other transient UI. Renders a close (X) icon by default, accepts a custom icon via children, and exposes onPress, isDisabled and full React Aria button props with hover/press/focus render states. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Close Button to your project and fits it to your theme.

Code

How HeroUI Close Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { CircleX, X } from "lucide-react"
import { CloseButton } from "@/components/ui/heroui-close-button"

export default function WithCustomIcon() {
  return (
    <div className="flex items-center gap-4">
      <div className="flex flex-col items-center gap-2">
        <CloseButton>
          <CircleX />
        </CloseButton>
        <span className="text-xs text-muted-foreground">Custom Icon</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <CloseButton>
          <X />
        </CloseButton>
        <span className="text-xs text-muted-foreground">Alternative Icon</span>
      </div>
    </div>
  )
}