'/%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
Popconfirm
Una confirmación pequeña junto al botón que la pide, para acciones rápidas.
import { Popconfirm } from '@alea/ui';
Ejemplos
Popconfirm
Pregunta junto al botón.
No solo para eliminar
Una confirmación neutral para algo reversible pero notable.
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-size-sm…
Props
Popconfirm props
Una pequeña confirmación junto a su disparador, para acciones rápidas y más o menos reversibles.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El botón que pregunta. |
onConfirmobligatoria | () => unknown | - | Se llama cuando la persona confirma. |
titleobligatoria | ReactNode | - | La pregunta. |
cancelLabel | ReactNode | - | Por defecto "Cancelar". |
confirmLabel | ReactNode | - | Por defecto "Sí". |
description | ReactNode | - | Más contexto bajo la pregunta. |
motion | MotionProp | - | Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones. |
placement | "start" | "end" | "bottom end" | "bottom start" | "bottom" | "top" | "bottom left" | "bottom right" | "top left" | "top right" | "top start" | "top end" | "l… | 'top' | Dónde se abre respecto a su disparador. |
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.
- Variantes
placementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…tonedangerdefault- Motion
- Acepta 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-popover-dialog.alea-popconfirm.alea-popconfirm-text.alea-popconfirm-actions
Accesibilidad
- Un alertdialog en un popover; el botón de confirmar recibe el foco.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Lo abre |
| Tab | Se mueve entre Cancelar y Confirmar |
| Escape | Lo cierra y devuelve el foco |
Qué hacer y qué evitar
Hacer
- Haz una pregunta directa: ¿Quitar este color?
Evitar
- No lo uses para acciones que no se pueden deshacer: usa AlertDialog.