OrbitModal

Diálogo centrado sobre un overlay — fondo color.overlay.scrim (una de las únicas dos alphas legítimas de todo el sistema, la otra siendo el color de sombra), cuerpo color.surface.card, radius.xl (16px, “modal” en la escala de radios). En web envuelve un <dialog> real (focus trap, Escape, stacking por top-layer, todo gratis); en Kotlin es un Dialog de Compose. Sombra solo acá y en OrbitDrawer — el resto de los contenedores de Orbit son planos.

Uso

Abrir modal

Eliminar proyecto

Esta acción no se puede deshacer.

Cancelar Eliminar

Web

<orbit-button id="open">Eliminar proyecto</orbit-button>
<orbit-modal id="modal">
  <h3>Eliminar proyecto</h3>
  <p>Esta acción no se puede deshacer.</p>
  <orbit-button variant="ghost" id="cancel">Cancelar</orbit-button>
  <orbit-button variant="destructive">Eliminar</orbit-button>
</orbit-modal>

<script>
  open.addEventListener('click', () => modal.setAttribute('open', ''));
  cancel.addEventListener('click', () => modal.removeAttribute('open'));
</script>

Compose Multiplatform

var showModal by remember { mutableStateOf(false) }
OrbitButton(text = "Eliminar proyecto", onClick = { showModal = true })
OrbitModal(visible = showModal, onDismissRequest = { showModal = false }) {
    Text("Eliminar proyecto")
    Text("Esta acción no se puede deshacer.")
    OrbitButton(text = "Cancelar", onClick = { showModal = false }, variant = OrbitButtonVariant.Ghost)
    OrbitButton(text = "Eliminar", onClick = { /* ... */ }, variant = OrbitButtonVariant.Destructive)
}

Al hacer click afuera del diálogo también se cierra — en web porque el click cae sobre el propio <dialog> (no sobre su contenido) y llama a .close(); en Kotlin porque Dialog llama a onDismissRequest con el comportamiento por defecto de la plataforma.

Props

Prop	Tipo	Default	Descripción
visible (Kotlin) / attr open (web)	boolean	false	Controla si el modal está abierto.
onDismissRequest (Kotlin) / evento close (web)	() => void	—	Se dispara al cerrar (click afuera, Escape, o programático).
content (Kotlin) / children (web)	slot	—	Contenido del diálogo.