Edge.Surface

Aplica iluminación a un elemento DOM.

Edge.Surface

Renderiza un elemento HTML conectado al Edge.Provider más cercano. La etiqueta elegida con as determina los atributos, eventos y refs disponibles.

Firma de Edge.Surface

<Edge.Surface as="article" edgeStyle="raised">
  Your content
</Edge.Surface>

Edge.Surface props
Prop / opción	Tipo	Predeterminado	Descripción
`pseudoElement`	`'after' \| 'before'`	`'after'`	Pseudoelemento de decoración. Elige before para conservar un ::after existente. Si ambos están ocupados o el elemento es una entrada nativa, usa un contenedor. Los valores inválidos lanzan RangeError.
`edgeStyle`	`'raised' \| 'recessed' \| 'matte'`	`'raised'`	Cómo responde el borde a la luz. Los tres estilos conservan la apariencia del componente.
`color`	`string`	`currentColor`	Color del reflejo. Usa el color de texto del elemento por defecto. Acepta cualquier cadena de color CSS, incluidas variables.
`shadowColor`	`string`	`#0008`	Color del borde opuesto. Acepta cualquier color CSS; usa transparent para quitar esta sombra en superficies claras.
`borderWidth`	`number`	`1`	Grosor decorativo en píxeles; no cambia el borde del elemento. Los negativos se limitan a 0. Los valores no finitos usan el predeterminado.
`intensity`	`number`	`1`	Multiplicador de la intensidad compartida. Los valores finitos se limitan a 0–1; los no finitos usan el predeterminado.
`as`	`HTML tag name`	`'div'`	Elemento HTML que se renderiza. Sus atributos y ref corresponden a la etiqueta elegida; no admite componentes React personalizados.
`children`	`ReactNode`	`Unset`	Contenido del elemento. Usa un contenedor para entradas y otros elementos que no puedan mostrar la decoración.
`ref`	`Ref<HTMLElement for the chosen tag>`	`Unset`	Se reenvía al elemento junto con el ref de registro interno. Se conserva la limpieza de refs de callback de React 19.
`className`	`string`	`Unset`	Tus clases, combinadas con las clases de decoración.
`style`	`CSSProperties`	`Unset`	Tus estilos en línea, combinados después de la decoración. Conserva las variables CSS de Edge salvo que quieras sobrescribirlas.

Usa Edge.Surface dentro de Edge.Provider. Renderizarlo fuera provoca un error. Para elementos input o conflictos con pseudoelementos existentes, consulta Consideraciones de integración.

El reflejo se alinea con el exterior del borde del elemento DOM. Para conectar el elemento de un componente existente, usa useSurface.