# useInteractiveRole

## Usage

Resolves what a polymorphic component should render as, in one place: href wins, then a click handler, then inert. Use it in any component that is sometimes a link, sometimes a button, and sometimes plain content; Token, Thumbnail and Item all do.

```ts
import { useInteractiveRole } from '@astryx-vue/core'
```

It takes a boolean for the click handler instead of the handler itself, because a function and a getter look the same in Vue: pass `hasOnClick: () => props.onClick != null`.

Upstream also reads an interactive trigger context supplied by a parent (Popover, DropdownMenu and friends), so a component built on it becomes a valid trigger for new surfaces without changing. The overlays in this port do not accept child elements as triggers, so there is no such context to read and the resolution stops at the click handler.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Switch on the returned role to pick the element, and render an anchor only for `"link"` so keyboard and middle-click behavior come from the platform. |
| Do | Pass `isDisabled` through rather than dropping the href yourself; the hook already ignores a disabled href when it resolves the role. |
| Don't | Add another ad-hoc href / click precedence check in a component; every consumer should inherit the same order. |

## Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `options.href` | `string \| undefined`, or a ref / getter of it | — | URL for navigation. Highest priority: with a non-empty href the component is a link. |
| `options.hasOnClick` | `boolean`, or a ref / getter of it | `false` | Whether the component has a click handler. Resolves to a button, ahead of anything else after the href. Upstream takes the handler itself; a boolean keeps a handler and a getter apart. |
| `options.isDisabled` | `boolean`, or a ref / getter of it | `false` | When true, href is ignored for role resolution (a disabled link is an anti-pattern), so the role comes from the click handler, then inert. |

## Returns

| Name | Type | Description |
| --- | --- | --- |
| `role` | `ComputedRef<'link' \| 'button' \| 'inert'>` | The element the component should render: an anchor, a button, or a non-interactive span / div. |