Interactive

Foundational utility for constructing interactive elements.

Import

import { Interactive } from '@vortex-kit/vortex';
import type { InteractiveProps } from '@vortex-kit/vortex';

Display

<Interactive href="/">{children}</Interactive>

Allied components

Link Button

Design Engineer

Features

Flexible rendering as button or anchor based on props.

Built-in accessibility features and keyboard navigation.

Focus management with customizable focus rings.

Event handling for both mouse and keyboard interactions.

Support for form submission and navigation.

Role

The Interactive component automatically determines its role based on the props provided. When href is provided, it renders as an anchor (<a>). When onClick is provided, it renders as a button (<button>) by default, or you can use the as prop to override the element type.

Interactive LinkInteractive Button

Interactive Div

Show Code

Disabled State

Use the disabled prop to disable the interactive component. This works for both button and link variants.

Disabled LinkDisabled Button

Show Code

Full Width

Use the fullWidth prop to make the interactive component span the full width of its container.

Full Width Interactive

Show Code

Focus Management

The Interactive component provides several options for focus management and styling.

Inset Focus

Inherit Border Radius

Show Code

Form Integration

The Interactive component can be used within forms with proper type attributes for form submission.

Show Code

Accessibility

The Interactive component provides comprehensive accessibility features including keyboard navigation, focus management, and proper ARIA attributes.

Key	Description
Tab	Navigate between interactive elements and show focus state.
Enter Space	Activate interactive elements (both button and link variants).
⬢	When href is provided, renders as <a> with proper link semantics.
⬢	When onClick is provided, renders as <button> with proper button semantics.
⬢	Supports disabled state for both button and link variants.
⬢	Customizable focus rings with insetFocus and disableFocusRing props.