# Elements Every intrinsic element the library registers, generated from its element registry: the core elements and those of the default cargo features. Each element also takes `style` and `children` (unless noted) and the common prop groups listed below. ## Common props ### Identity `BevyAttributes` | Prop | Type | Description | | --- | --- | --- | | `name` | `string` | Names the element's Bevy entity: the value lands on it as a Bevy `Name` component and in the `ReactNodes` index, so app systems can find React-created entities (`Query<(Entity, &Name), With>` or `ReactNodes::get("hud")`) and attach their own components, read layout, or watch mount/unmount. Not unique — a list can name every card `"card"` (`ReactNodes::all`). Dynamic: a change renames, removing it (or `""`) drops the `Name`. Bridge-owned: Rust code must not set `Name` on React nodes itself. | | `sharedTag` | `string` | Shared-element identity. When one commit unmounts a node with this tag and mounts another with the same tag — a different parent, a different screen; React has no reparenting, so a "move" is always unmount + mount — the incoming node starts where the outgoing one visually was: its position and size (the rect it showed, mid-flight included), its background color, opacity, transforms, filters and gradients, and eases to its own layout and style with `transition: { sharedElement }` on the incoming node (required — a tag without it pairs but snaps). Pairing rules: same tag, same element type, same UI root (a ``/`` is its own), same commit; the first mounted matching outgoing node seeds every incoming node with the tag, silently. Unique tags per screen (`hero-${id}`) are the intent. Size flies in measured px through real layout (the parent re-flows each frame; children stay crisp); position by translation; the outgoing node unmounts instantly; the flight is clipped by the new parent's overflow like any layout transition. A `""` is untagged. | ### State styles `BevyVariantProps` | Prop | Type | Description | | --- | --- | --- | | `hoverStyle` | `BevyStyle` | Style overlaid on `style` while the element is hovered. | | `pressStyle` | `BevyStyle` | Style overlaid on `style` (and `hoverStyle`) while the element is pressed. | | `focusStyle` | `BevyStyle` | Style overlaid on `style` while the element is focused. Applied on the Bevy side from the element's focus state, so it needs no React `onFocus` round-trip (the focus analogue of `hoverStyle`/`pressStyle`). | ### Pointer events `BevyPointerProps` | Prop | Type | Description | | --- | --- | --- | | `onClick` | `() => void` | Clicked with the primary (left) mouse button: fires on release over the element the press landed on (press, drag off, release elsewhere does not click — DOM `click` semantics). For right/middle interactions use `onPointerDown`/`onPointerUp` and read `e.button`. | | `onPointerDown` | `(e: PointerEventData) => void` | Pointer pressed on this element (a drag begins). Receives the cursor's normalized position within the element. | | `onPointerMove` | `(e: PointerEventData) => void` | Pointer moved while held down (a drag). Fires each frame the button stays down — even when the cursor leaves the element — until release. | | `onPointerUp` | `(e: PointerEventData) => void` | Pointer released after a press/drag that began on this element. | | `onPointerEnter` | `(e: PointerEventData) => void` | Pointer entered this element (hover begins). Fires once on the boundary crossing — not again on press/release while still inside. | | `onPointerLeave` | `(e: PointerEventData) => void` | Pointer left this element (hover ends). | ### Scrolling `BevyScrollProps` | Prop | Type | Description | | --- | --- | --- | | `scrollTop` | `number` | Controlled vertical scroll offset in logical px (maps to `ScrollPosition.y`). Meaningful on a node with `overflowY: "scroll"`. Pushed into the node only when it diverges from the live offset, so it never fights the user's wheel. | | `scrollLeft` | `number` | Controlled horizontal scroll offset in logical px (maps to `ScrollPosition.x`). Meaningful on a node with `overflowX: "scroll"`. | | `scrollStep` | `number` | Logical pixels scrolled per mouse-wheel "line" for this container (default 20). Only scales line-based wheels; trackpad pixel deltas are used as-is. | | `onScroll` | `(e: { scrollTop: number; scrollLeft: number }) => void` | Fires when this node's scroll offset changes (wheel or a controlled write). Receives the new offset; pair with `scrollTop`/`scrollLeft` for a controlled scroll container. | ### Wheel `BevyWheelProps` | Prop | Type | Description | | --- | --- | --- | | `onWheel` | `(e: WheelEventData) => void` | Mouse wheel over this node. Fires for **any** node (no `overflow: scroll` needed) with the raw deltas — drive a zoom, pan, or custom scroll. Handling the wheel traps it from world systems (a 3D camera behind it won't also zoom). | ## `` Common props: Identity, State styles, Pointer events, Scrolling, Wheel. Guide: [](../elements/anchor.md). | Attribute | Type | Required | | --- | --- | --- | | `entity` | `number \| bigint` | yes | | `offset` | `Vec3` | | | `scale` | `AnchorScaling` | | ## `