Components
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.
npx @21st-dev/cli@beta add hero_ui/heroui-close-buttonLoading preview...
"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>
)
}