# InteractableDiv

**When to use:** Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics. Use when you need a custom-styled clickable container that isn't a `<button>`.

Enter and Space dispatch a real click, the way a native button does, so `onClick` always receives a `MouseEvent` and a handler on an element above this one sees the activation too.

A click or a key on a control **inside** it belongs to that control: a field, a link, a button or
anything carrying an interactive `role` swallows the activation, so a clickable container can hold
a form without every click into it counting as a press. The event itself is never stopped, so a
handler on an element above this one, or one attached to the node with a `ref`, still sees every
click, including the ones this one declines.

**Keywords:** custom button div

**Import:** `import { InteractableDiv } from '@ahrowe/ui'`

```tsx
import { InteractableDiv } from '@ahrowe/ui';

<InteractableDiv onClick={handleClick} className="my-card">
  <img src={thumbnail} alt="" />
  <span>{title}</span>
</InteractableDiv>
```

**Note:** Check [package/common/interactableDiv/](https://github.com/ahrowe-dev/ahrowe-ui/tree/master/package/common/interactableDiv) for full prop details.