Clickable

'use client';

import { Clickable } from '@/ui/Clickable';

export function ClickableDemo() {
  return (
    <Clickable
      onClick={() => alert('Clicked!')}
      className="rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50"
    >
      Click me or press Enter/Space
    </Clickable>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/clickable.json
Copy

Usage

Copyimport { Clickable } from '@/docs/lib/ui/clickable';
 
export function Component() {
  const handleClick = () => {
    console.log('Clicked!');
  };
 
  return (
    <Clickable onClick={handleClick} className="rounded-lg p-4 hover:bg-gray-100">
      Click me or press Enter/Space
    </Clickable>
  );
}

API Reference

Clickable

The component also accepts all standard HTML div element attributes via ComponentPropsWithoutRef<"div">.

Notes

• Accessibility: The component automatically sets role="button" and tabIndex={0} to make the div keyboard accessible and screen-reader friendly.
• Keyboard Support: Responds to both Enter and Space keys, matching native button behavior.
• Click Handler: The onClick callback is triggered by mouse clicks, touch events, and keyboard activation (Enter/Space keys).
• Forwarded Ref: Supports React ref forwarding, allowing parent components to access the underlying div element.
• Use Case: Ideal for making custom clickable areas, cards, or complex interactive elements that aren't semantic buttons but need button-like behavior.
• Semantic HTML: When possible, prefer using semantic <button> elements. Use Clickable when you need clickable behavior on a container with complex children or layout requirements that are difficult to achieve with a button element.