Class NeedleButtonElement

<needle-button> is a web component for easily adding AR, VR, Quicklook, or QR code buttons to your website without writing JavaScript code.

The button automatically handles session management and displays appropriate UI based on device capabilities. It comes with default styling (glassmorphism design) but can be fully customized with CSS.

Supported button types:

  • ar - WebXR AR session button
  • vr - WebXR VR session button
  • quicklook - Apple AR Quick Look button (iOS only)
  • qrcode - QR code sharing button

Example: Basic AR/VR buttons

<needle-engine src="scene.glb"></needle-engine>
<needle-button ar></needle-button>
<needle-button vr></needle-button>
<needle-button quicklook></needle-button>

Example: Custom button labels

<needle-button ar>Start AR Experience</needle-button>
<needle-button vr>Enter VR Mode</needle-button>
<needle-button quicklook>View in AR</needle-button>

Example: Custom styling

<style>
  needle-button {
    background-color: #ff6b6b;
    color: white;
    border-radius: 8px;
    padding: 1rem 2rem;
  }
  needle-button:hover {
    background-color: #ff5252;
  }
</style>
<needle-button ar>Start AR</needle-button>

Example: Unstyled button (for complete custom styling)

<needle-button ar unstyled>
  <span class="my-icon">🥽</span>
  Launch AR
</needle-button>

See

  • NeedleEngineWebComponent for the main <needle-engine> element
  • NeedleMenu for the built-in menu component that can display similar buttons

Hierarchy

Constructors

constructor

Methods

attributeChangedCallback

Constructors

constructor

Methods

attributeChangedCallback

  • attributeChangedCallback(
        _name: string,
        _oldValue: string,
        _newValue: string,
    ): void

    Parameters

    • _name: string
    • _oldValue: string
    • _newValue: string

    Returns void

Settings

Member Visibility

On This Page

Constructors
Methods