useInteractiveRole @astryx-svelte/core v0.5.2 · hooks
Usage
Resolves what a polymorphic component should render as, in one place: href wins, then onClick, then an interactive trigger context supplied by a parent (Popover, DropdownMenu and friends), then inert. Use it in any component that is sometimes a link, sometimes a button, and sometimes plain content; Token, Thumbnail, Item and ClickableCard all do. Because context is part of the resolution, a component built on it becomes a valid trigger for new surfaces without changing.ts
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 keeps disabled links out of the tab order. |
| Don't | Add another ad-hoc href/onClick precedence check in a component; new trigger contexts are added here so every consumer inherits them. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
options Required | UseInteractiveRoleOptions | — | The interactivity inputs the component received. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
options.href | string | — | URL for navigation. Highest priority: with an href the component is a link. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
options.onClick | ((...args: never[]) => unknown) | null | — | Click handler. Resolves to a button, ahead of any context-provided role. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
options.isDisabled | boolean | false | When true, href is ignored for role resolution (a disabled link is an anti-pattern), so the role comes from onClick, then context, then inert. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |
Returns
| Field | Type | Default | Description |
|---|---|---|---|
role | 'link' | 'button' | 'inert' | — | The element the component should render: an anchor, a button, or a non-interactive span/div. Not declared by core, so this type is mapped from upstream's rather than read from the compiler. |