@needle-tools/engine/lib/engine/webcomponents/needle-button.d.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

declare global {
    interface HTMLElementTagNameMap {
        "needle-button": NeedleButtonElement;
    }
}
/**
 * [<needle-button>](https://engine.needle.tools/docs/api/NeedleButtonElement) 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
 * ```html
 * <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
 * ```html
 * <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
 * ```html
 * <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)
 * ```html
 * <needle-button ar unstyled>
 *   <span class="my-icon">🥽</span>
 *   Launch AR
 * </needle-button>
 * ```
 *
 * @see {@link NeedleEngineWebComponent} for the main &lt;needle-engine&gt; element
 * @see {@link NeedleMenu} for the built-in menu component that can display similar buttons
 */
export declare class NeedleButtonElement extends HTMLElement {
    #private;
    static observedAttributes: string[];
    constructor();
    attributeChangedCallback(_name: string, _oldValue: string, _newValue: string): void;
}