Components
Loading preview...
Button component for closing dialogs, modals, or dismissing content.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-close-button"use client";
import { useState } from "react";
import { CloseButton } from "@/components/ui/heroui-close-button";
export default function Interactive() {
const [count, setCount] = useState(0);
const ariaLabel = count === 0 ? "Close (clicked 0 times)" : `Close (clicked ${count} times)`;
const clickedText = count === 0 ? "Clicked: 0 times" : `Clicked: ${count} times`;
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col items-center justify-center gap-4">
<CloseButton aria-label={ariaLabel} onPress={() => setCount(count + 1)} />
<span className="text-sm text-zinc-500 dark:text-zinc-400">{clickedText}</span>
</div>
</div>
);
}
export { Interactive };