Interactive

<Interactive
  disabled={false}
  fullWidth={false}
  insetFocus={false}
  focusRingDisabled={false}
  touchHitbox={false}
>
  Interactive
</Interactive>

Role

Interactive can render as a button, link, or custom element. With href, it renders an anchor (<a>). With onClick, it renders a button (<button>) by default.

<Interactive href="" attributes={{ target: '_blank' }}>
  Interactive Link
</Interactive>

<Interactive onClick={() => ()}>
Interactive Button
</Interactive>

<Interactive as="div" onClick={() => ()}>
  Interactive Div
</Interactive>

Links

Use href to render a link. Use external to open a link in a new tab. Interactive applies rel="noopener noreferrer" automatically.

<Interactive href="https://example.com">Internal link</Interactive>
<Interactive href="https://example.com" external>External link</Interactive>

Disabled State

Interactive has a disabled state for elements that are not available for interaction. This works for button and link variants.

<Interactive type="button" disabled>Disabled button</Interactive>
<Interactive href="https://example.com" disabled>Disabled link</Interactive>

Full Width

Interactive can be made full width by setting the fullWidth property to true.

<Interactive fullWidth href="/">
  Full Width Interactive
</Interactive>

Focus Ring

Interactive has a focus ring that is visible during keyboard navigation.

Inset Focus

Use insetFocus to place the focus ring inside the element bounds.

<Interactive type="button" insetFocus>Inset focus ring</Interactive>

Disabled Focus Ring

Use focusRingDisabled when another element renders the focus indicator.

<Interactive type="button" focusRingDisabled>No focus ring</Interactive>

Inherited Border Radius

Use borderRadius="inherit" to let the focus ring follow the border radius of the first child.

<Interactive type="button" borderRadius="inherit">
<span style={{ display: 'block', borderRadius: '999px', padding: '8px 16px' }}>
  Rounded child
</span>
</Interactive>

Touch Hitbox

Use touchHitbox to increase the touch target for small controls. The hitbox meets the WCAG AA minimum touch target of 44×44px.

<Interactive type="button" touchHitbox>Small target</Interactive>

Custom Element

Use the as prop to render Interactive as any valid HTML element.

<Interactive as="label" type="button">Label element</Interactive>
<Interactive as="div" type="button">Div element</Interactive>

Render Slot

Use the render prop for full control over the root element. The function receives the attributes that need to be applied to the rendered element.

<Interactive
  href="https://example.com"
  render={(attributes) => (
      <a {...attributes} data-custom="value" />
  )}>
      Custom anchor
</Interactive>