Saltar al contenido

Componentes

Modales

Formularios con cabecera y acciones fijas y cuerpo desplazable.

Prueba sin guardar cambios

Cargando ejemplo…

Cuándo usar

Todos los modales usan PlatformFormModal: shell azul gris, contenedor interior suave, cabecera y footer fijos. PlatformModalBody compone secciones cuando bodySurface es plain.

Propiedades y variantes

PropiedadContrato
isOpen / onCloseVisibilidad controlada y callback de cierre.
title / description / footerEncabezado y acciones del consumidor.
isBusyBloquea el cierre durante una operación.
dismissiblefalse retira cierre, Escape y overlay; conservar en onboarding obligatorio.
width / bodySurfaceAncho según contenido; soft es el cuerpo por defecto.

Estados y accesibilidad

Prueba Escape, retorno de foco, scroll del cuerpo y acciones alcanzables. Usa tonos secondary y primary en el footer.

Evitar

No recrees overlays ni shells locales; no cambies colores o dimensiones de botones para aproximar el estándar. No agregues Cancelar a un flujo obligatorio.

Código fuente

  • apps/platform/src/shared/components/platform-form-modal.tsx