Modal

Cuándo usarlo#

Un modal es una interrupción. Usalo solo cuando la página no puede seguir sin la respuesta.

Se arma por partes#

ModalHeader + ModalBody + ModalFooter. Igual que en Figma (.Modal header y .Modal footer), los ocho tipos del set —Dialog, Confirm, Scrollable, Form, Code, Survey, Onboarding, Celebration— son recetas de esas tres piezas.

Confirmación#

Icono centrado, sin ✕ (hay un Cancelar visible) y footer full.

import { Button } from "@/registry/ds/button";
import { AlertTriangle } from "@/registry/ds/icons";
import { Modal, ModalClose, ModalFooter, ModalHeader } from "@/registry/ds/modal";

export default function ModalConfirm() {
  return (
    <Modal size="sm" trigger={<Button variant="tonal">Dar de baja la materia</Button>}>
      <ModalHeader
        icon={<AlertTriangle />}
        align="center"
        closable={false}
        title="¿Dar de baja Cálculo I?"
        subtitle="Perdés el cupo y no podés volver a inscribirte este semestre."
      />
      <ModalFooter layout="full">
        <ModalClose>
          <Button variant="stroke">Cancelar</Button>
        </ModalClose>
        <ModalClose>
          <Button>Dar de baja</Button>
        </ModalClose>
      </ModalFooter>
    </Modal>
  );
}

Contenido largo#

El cuerpo scrollea; header y footer quedan fijos. El divisor del footer marca que hay más contenido detrás.

import { Button } from "@/registry/ds/button";
import { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader } from "@/registry/ds/modal";

export default function ModalScrollable() {
  return (
    <Modal size="lg" trigger={<Button variant="stroke">Ver términos</Button>}>
      <ModalHeader title="Términos de la beca" subtitle="Última actualización: marzo 2026" />
      <ModalBody className="max-h-64 space-y-3">
        {Array.from({ length: 8 }, (_, i) => (
          <p key={i}>
            {i + 1}. La beca cubre el porcentaje indicado de la matrícula mientras mantengas un promedio igual o
            superior a 7 y no adeudes materias del ciclo anterior.
          </p>
        ))}
      </ModalBody>
      <ModalFooter divider>
        <ModalClose>
          <Button variant="stroke">Ahora no</Button>
        </ModalClose>
        <ModalClose>
          <Button>Aceptar términos</Button>
        </ModalClose>
      </ModalFooter>
    </Modal>
  );
}

Reglas#

• Un modal a la vez. Nunca un modal que abre otro.
• Acción principal a la derecha, con verbo + objeto ("Cambiar comisión"), nunca "OK" ni "Sí". La secundaria es literalmente "Cancelar".
• En acciones destructivas, el foco inicial va a Cancelar y el título es la pregunta completa: "¿Dar de baja Cálculo I?".
• Siempre se puede salir: ✕, Esc, clic afuera o Cancelar. Solo bloqueá el cierre si se perderían datos.
• El título dice de qué se trata; no repitas "Atención" o "Confirmar".
• En mobile ocupa casi todo el ancho; si el contenido no entra cómodo, es una página.

Medidas#

Tokens#

En Figma#

Instalación#

npx shadcn@latest add https://polen.cdc.cool/r/modal.json

Playground#

Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.

<Modal trigger={<Button variant="stroke">Abrir modal</Button>}>
  <ModalHeader title="Cambiar de comisión" subtitle="El cambio se aplica desde la próxima clase." />
  <ModalBody>…</ModalBody>
  <ModalFooter>
    <ModalClose>
      <Button variant="stroke">Cancelar</Button>
    </ModalClose>
    <Button onClick={save}>Cambiar comisión</Button>
  </ModalFooter>
</Modal>

Uso#

<Modal trigger={<Button>Abrir</Button>}>
  <ModalHeader title="Cambiar de comisión" />
  <ModalBody>…</ModalBody>
  <ModalFooter>
    <ModalClose><Button variant="stroke">Cancelar</Button></ModalClose>
    <Button onClick={save}>Cambiar comisión</Button>
  </ModalFooter>
</Modal>

Para abrirlo desde código, controlalo: <Modal open={open} onOpenChange={setOpen}>.

Props#

Sobre Base UI Dialog.

Teclado#

Qué viene resuelto#

• role="dialog" con el título como nombre y el subtítulo como descripción.
• Foco atrapado adentro; al cerrar vuelve al botón que lo abrió.
• El resto de la página queda inerte y sin scroll.
• Clic en el scrim cierra. La ✕ tiene nombre accesible.
• Sin animación con prefers-reduced-motion.

Qué tenés que cuidar vos#

• El foco inicial cae en el primer elemento enfocable. En confirmaciones destructivas, que ese sea Cancelar (ponelo primero en el footer).
• No abras un modal sin que la persona lo pida (al cargar la página, por tiempo).
• Si ocultás la ✕, dejá siempre un Cancelar visible.