'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Capas
Dialog
Una tarea enfocada sobre la página. AlertDialog confirma algo que no se puede deshacer.
import { DialogTrigger, DialogModal, Dialog, AlertDialog } from '@alea/ui';
Ejemplos
Dialog
Un título, una descripción, contenido y un pie. Escape y la X lo cierran.
AlertDialog
Confirma lo que no se puede deshacer. Escape y los clics afuera no lo cierran por accidente.
Tamaños
sm, md (por defecto), lg y full.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Type
--alea-font-family-display…--alea-font-leading-tight…--alea-font-size-2xl…--alea-font-size-md…--alea-font-tracking-display…--alea-font-weight-light…
Props
Dialog props
El contenido del diálogo: título, texto, cuerpo y pie. Ponlo dentro de DialogModal.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto bajo el título. |
footer | ReactNode | ((opts: { close: () => void; }) => ReactNode) | - | Botones abajo, por ejemplo Cancelar y Guardar. Recibe close. |
hideClose | boolean | - | Oculta el botón X. |
title | ReactNode | - | El título (obligatorio para lectores de pantalla salvo que haya aria-label). |
DialogModal props
La capa modal: oscurece la página, atrapa el foco, se cierra con Escape (y con clic afuera cuando isDismissable). Cuatro tamaños, pantalla completa en teléfonos cuando quieras.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
fullscreenBelow | "sm" | "md" | - | Ocupa toda la pantalla por debajo de este breakpoint (teléfonos): sm (640 px) o md (768 px). |
motion | MotionProp | - | Cómo entra y sale el diálogo (por defecto rise): un preset, false, u opciones. |
size | "sm" | "md" | "lg" | "full" | 'md' | sm 400, md 520, lg 720, full. |
AlertDialog props
Un diálogo de confirmación (role alertdialog): Escape y el clic afuera no lo cierran por accidente.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
titleobligatoria | ReactNode | - | La pregunta, por ejemplo "¿Eliminar este archivo?". |
cancelLabel | ReactNode | - | El texto del botón de cancelar. Por defecto "Cancelar". |
confirmLabel | ReactNode | - | El texto del botón de confirmar. |
defaultOpen | boolean | - | Abierto en el primer render (no controlado). |
isOpen | boolean | - | Estado abierto (controlado). |
motion | MotionProp | - | Cómo entra y sale el diálogo (por defecto rise). |
onConfirm | (() => unknown) | - | Se ejecuta al confirmar; el diálogo se cierra después (espera una promesa). |
onOpenChange | ((open: boolean) => void) | - | Se llama cuando se abre o se cierra. |
tone | "danger" | "default" | 'default' | danger pone en rojo el botón de confirmar. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Dialog
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-dialog.alea-dialog-head.alea-dialog-title.alea-dialog-x.alea-dialog-description.alea-dialog-body.alea-dialog-footer
DialogModal
- Variantes
fullscreenBelowsmmdsizesmmdlgfull- Motion
- riseAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-modal-overlay.alea-modal- Atributos data
data-size=smdata-size=lgdata-size=fulldata-fullscreen-below=smdata-fullscreen-below=md
Accesibilidad
- El foco entra al diálogo y se queda ahí; vuelve al disparador al cerrar.
- La página de atrás se oculta a los lectores de pantalla.
- Escape cierra un Dialog; un AlertDialog necesita una elección.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre el diálogo |
| Escape | Cierra (no en AlertDialog) |
Qué hacer y qué evitar
Hacer
- Ponle título a cada diálogo.
- Pon la acción principal al final del pie.
Evitar
- No abras un diálogo al cargar la página.
- No apiles diálogos.
En Figma
Dialog con Size y espacios para el cuerpo y el pie.