Loading navigation…
User
Usage
Interactable adds keyboard-accessible, clickable behavior to a child surface when a standard Button or Icon button is not the right visual wrapper. It bridges custom layout or third-party markup with expected focus, activation, and ARIA roles. The mental model is “make this region behave like a button—or merge props into a child element—without fighting the design.”
injectChild true): preserve the child element type while merging interactive props (for example a styled container that must stay a non-button element for CSS reasons).| Aspect | Purpose | Emphasis |
|---|---|---|
Default injectChild false | Renders a button-like wrapper | Prefer when you can accept button semantics |
injectChild true | Merges into child via slot | Child must forward props; test focus and role |
InteractableType | Visual feedback presets | Not a substitute for semantic state; pair with design |
active | Shows selection within a set | Don’t use alone for “pressed” without aria-pressed when it behaves as a toggle |
disabled | Blocks interaction | Keep visible only when the user needs to know the action exists |
Interactable wraps children (or injects into them) and centralizes onClick, keyboard handlers (Enter / Space), tabIndex, and disabled behavior. Nested interactive elements require explicit event handling so inner controls don’t fire the outer handler unintentionally.
aria-label (or labelled-by) that states the action, not the visual style.aria-pressed or the appropriate role when state changes meaning, not only color.aria-expanded and move focus sensibly.Enter and Space activate; don’t swallow keys needed by nested inputs.active and disabled props.Do
injectChild only when you’ve verified the child can receive merged props and remains accessible.Don’t
role="button" (or use real button) and support keyboard activation.outline: none without replacement.