Elevaciones

Las elevaciones simulan profundidad en la interfaz mediante el uso de sombras para indicar jerarquía visual, estados e interacción entre los elementos.

También permiten diferenciar componentes del fondo u otras capas, ayudando a organizar la información y separar secciones.

Su uso es clave para representar superficies superpuestas como modales, menús desplegables o dropdowns.

Niveles de elevación

Tokens

PrimeNG/Shadow1
PrimeNG/Shadow2
PrimeNG/Shadow3
PrimeNG/Shadow4
PrimeNG/Shadow5
PrimeNG/Shadow6
PrimeNG/Shadow7
PrimeNG/Shadow8

Casos de uso comunes

Elevación por default

Se utiliza para componentes flotantes.

Elevación para overlay

Se utiliza para elementos que bloquean la interacción con el fondo.

Buen uso de las elevaciones

No usar las elevaciones dentro de las cards.
Las elevaciones deben reforzar la jerarquía, no competir con ella.
Combinar elevación con cambios de estado (hover, focus).

Contenidos