Saltar al contenido

Componentes

Superficies

Contenedores raised, inset y floating con tokens compartidos.

Prueba sin guardar cambios

Cargando ejemplo…

Cuándo usar

Agrupa contenido en raised, controles en inset y contenido superpuesto en floating. El helper de superficies plásticas compone acentos cuando una primitiva existente no cubre la necesidad.

Propiedades y variantes

PropiedadContrato
elevationraised por defecto; floating en CrmRaisedSurface.
children / classNameContenido y geometría contextual; no reemplazar sombras.
getCrmPlasticSurfaceStyleRecibe surface y border para un acento plástico.

Estados y accesibilidad

Son contenedores, no controles: no añaden por sí mismos interacción ni significado accesible. Usa encabezados y etiquetas para explicar los grupos.

Evitar

No conviertas un div con sombra en botón. No copies recetas box-shadow ni uses floating para todas las tarjetas.

Código fuente

  • apps/platform/src/modules/crm/components/inset-surface.tsx