Superposiciones

Dialog

Una tarea corta encima de la página, sin perder el contexto de atrás.

import { Dialog, DialogClose, DialogContent, DialogDescription, … } from "sebs7n-ui/dialog"

Ejemplos

Básico

El trigger usa `render={<Button … />}`, no `asChild`.

import { Button } from "sebs7n-ui/button"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "sebs7n-ui/dialog"
import { Input } from "sebs7n-ui/input"
import { Label } from "sebs7n-ui/label"
import { useId } from "react"

function Basico() {
  const id = useId()
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" />}>Editar cliente</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Editar cliente</DialogTitle>
          <DialogDescription>Los cambios se aplican a las facturas nuevas, no a las emitidas.</DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-2">
          <Label htmlFor={id}>Razón social</Label>
          <Input defaultValue="Acme S.A." id={id} />
        </div>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Cancelar</DialogClose>
          <DialogClose render={<Button variant="accent" />}>Guardar</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Controlado, con carga

`open` en el estado de la app: el diálogo se cierra cuando termina la operación.

import { Button } from "sebs7n-ui/button"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "sebs7n-ui/dialog"
import { useState } from "react"

function Controlado() {
  const [abierto, setAbierto] = useState(false)
  const [guardando, setGuardando] = useState(false)
  return (
    <Dialog onOpenChange={setAbierto} open={abierto}>
      <DialogTrigger render={<Button />}>Emitir factura</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Emitir la factura 0014</DialogTitle>
          <DialogDescription>Se envía a AFIP y después no se puede editar.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose render={<Button variant="ghost" />}>Cancelar</DialogClose>
          <Button
            loading={guardando}
            onClick={() => {
              setGuardando(true)
              setTimeout(() => {
                setGuardando(false)
                setAbierto(false)
              }, 1400)
            }}
            variant="accent"
          >
            Emitir
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Dialog

Hereda las props de Dialog.Root.

Sin props propias: pasa todo al primitivo.

DialogClose

Hereda las props de Dialog.Close.

Sin props propias: pasa todo al primitivo.

DialogContent

Hereda las props de Dialog.Popup.

Prop	Tipo	Por defecto	Descripción
`showCloseButton`	`boolean`	`true`	El botón X de la esquina. Si lo sacás, tiene que haber otra salida visible.
`className`	`string`	—

DialogDescription

Hereda las props de Dialog.Description.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

DialogFooter

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

DialogHeader

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

DialogOverlay

Hereda las props de Dialog.Backdrop.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

DialogTitle

Hereda las props de Dialog.Title.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

DialogTrigger

Hereda las props de Dialog.Trigger.

Sin props propias: pasa todo al primitivo.

Teclado

Enter · Espacio: Abre desde el trigger.
Tab · ⇧Tab: Recorre solo el contenido del diálogo: el foco queda atrapado adentro.
Escape: Cierra y devuelve el foco al trigger.
Click en el fondo: Cierra.

Accesibilidad

DialogTitle no es opcional: es el nombre accesible del diálogo. Si no querés mostrarlo, ocultalo visualmente pero dejalo en el DOM.
DialogDescription se asocia con aria-describedby y se lee después del título.
El foco entra al abrir y vuelve al trigger al cerrar, y el fondo queda inerte.
El botón X trae su propio nombre accesible; showCloseButton={false} obliga a dejar otra salida visible.

Reglas de uso

Los triggers usan `render={<Button … />}`, no `asChild`.
Para confirmar algo destructivo, AlertDialog: no se cierra con click afuera y exige una respuesta.
En mobile, un formulario largo no va en Dialog: va en una página o en un Sheet.
El footer va con la acción principal a la derecha y «Cancelar» a su izquierda.

Relacionados

AlertDialog Sheet Popover