Ficha
- Categoría
- Overlays
- Nivel
- organismo
- Estado
- en revisión
- Radix
- sí
- Actualizado
- 2026-10-26
- Figma
- 505:16918
- Fuente
design-system/componentes/Dialog.md
Diálogo modal sobre la pantalla actual: título, descripción opcional, slot Content opcional y hasta tres acciones (tertiary, secondary, primary). Siempre sobre el velo (surface/scrim/default + Blur/Scrim) y centrado en el viewport. Size=sm (480) para mensajes solo de texto; Size=md (600) cuando Content lleva opciones o un formulario.
Cuándo usarlo
- Confirmar una decisión que cambia el flujo: ¿Terminar la práctica? (Finalizar · Salir sin calificar · Seguir practicando).
- Interrupciones que el usuario debe reconocer: Práctica en pausa, Se acabó el tiempo.
- Formularios cortos que no merecen una página: ¿Algo está mal calificado? (feedback de la calificación, R3).
Cuándo NO usarlo
- Problemas recuperables y no bloqueantes (sin micrófono, ruido, sin conexión): Callout dentro de la pantalla.
- Progreso de carga o de calificación: el estado de la pantalla (Calificando), no un diálogo.
- El coach: vive en CoachPanel, nunca en un diálogo.
Anatomía
Sobre scrim: caja 600 / 480, radius-5x, base/fixed/white, Shadow/Card, padding 32, gap 24: header (título heading/lg + descripción body/md 07-mid, gap 8) · slot Content (gap 16) · acciones a la derecha (gap 12: Button tertiary · secondary · primary, md).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
title | Title | texto | — |
description + showDescription | Description · Show description | texto · boolean | — · true |
children + showContent | Content (slot) · Show content | nodos · boolean | — · false |
tertiaryAction + showTertiaryAction | tertiary-action (Button) · Show tertiary action | { label, onClick } · boolean | — · true |
secondaryAction + showSecondaryAction | secondary-action · Show secondary action | { label, onClick } · boolean | — · false |
primaryAction + showPrimaryAction | primary-action · Show primary action | { label, onClick, disabled } · boolean; opcional: sin primaria queda solo la terciaria («Cerrar» en Evaluarme · 02) | — · true |
size | Size | md (600) · sm (480) | md |
open, onOpenChange | — | controlado | — |
role | — | dialog · alertdialog | dialog |
trigger | — | nodo que lo abre (opcional) | — |
Estados
Cerrado · abierto; Esc y el velo cierran solo con acción terciaria (cancelar seguro) y nunca en alertdialog.
Accesibilidad
- role=dialog (alertdialog para «Se acabó el tiempo»), aria-modal, aria-labelledby → título, aria-describedby → descripción.
- El foco entra al abrir (la acción primaria), queda atrapado mientras está abierto y vuelve al disparador al cerrar (Radix). Esc cierra cuando hay una acción de cancelar segura (la terciaria); no en Se acabó el tiempo. El fondo queda inerte.
- Animación de entrada corta; nada con prefers-reduced-motion (DV-22).
Contenido
Título como pregunta o estado, sentence case, ≤ 6 palabras. Descripción: una o dos frases con la consecuencia. Una sola acción primaria (DV-16) con el verbo del resultado («Finalizar», «Reanudar»), nunca «Aceptar». Orden del pie: terciaria (cancelar / seguir) · secundaria · primaria, alineadas a la derecha.
Errores conocidos
- Ancho sin token en Figma (480 / 600): excepción en código hasta que existan Size/dialog-sm y Size/dialog-md.
- Candidatos del
T-02-dialog.md, no creados: fila de opción del diálogo 07 (DialogOption) y área de texto multilínea de 09b (TextArea).
Changelog
- 2026-10-26 ·
primaryActionpasa a opcional (Cowork 3): Evaluarme · 02 solo lleva «Cerrar». - 2026-10-26 · nace (T-02 · Dialog), con Radix Dialog.