Dialog

Modal accesible (Radix).

Modal

Vista previa

<Dialog>
  <DialogTrigger asChild><Button>Editar</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Editar perfil</DialogTitle>
      <DialogDescription>Haz cambios…</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild><Button>Guardar</Button></DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Comparación de temas

El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.

Claro · base

Oscuro · base

Claro · emerald

Oscuro · violet