0257
Overlays Creacion Revision

Toast · notificación efímera

Publicado
Lectura
4 min

El Toast confirma sin interrumpir. Aparece, dura cinco segundos, se va. No requiere acción del usuario para desaparecer (aunque la permite). Su frontera con Modal (interrumpe) y con Banner (persiste) está bien dibujada en la policy. Esta ficha la documenta.

Decomposición del componente

Las seis capas del componente

01 · Átomo color.accent.green · color.red.500 · space.3 · space.4 · radius.md · duration.5000

Primitivos. La duración 5000ms es el valor único del sistema para efímeros auto-cerrables.

02 · Compuesto color.toast.bg.success · color.toast.bg.danger · space.toast.padding · motion.toast.life · motion.toast.enter

Semánticos. life y enter separados: la vida del Toast no se confunde con su entrada animada.

03 · Regla aria-live polite/assertive · pause on hover y on focus · no acción crítica · limit 3 simultáneos

Governance. La diferencia polite vs assertive depende de si es error crítico; el resto polite.

04 · Pieza <Toast variant='success' message='...' duration={x} />

Schema cerrado. Sin message, rechazo. duration solo override para Toasts con acción reversible.

05 · Familia Overlays · sibling de Modal, Banner, Tooltip

Toast confirma sin interrumpir. Modal interrumpe. Banner persiste.

06 · Estado entering · visible · paused (hover/focus) · dismissing · agent-aware

paused es el estado que cumple WCAG SC 2.2.1 Timing Adjustable.

Tokens consumidos

Semánticos

color.toast.bg.success oklch(0.92 0.06 145)

Fondo verde claro para confirmaciones positivas

color.toast.bg.danger oklch(0.92 0.08 28)

Fondo rojo claro para errores no bloqueantes

space.toast.padding 0.875rem 1rem

Padding compacto, no debe sentirse como Modal

motion.toast.life 5000ms

Duración estándar antes de auto-cerrar

motion.toast.enter { duration: 200ms, easing: cubic-bezier(0.2, 0, 0.38, 1) }

Animación de entrada slide-up, deshabilitada con prefers-reduced-motion

Técnicas de governance aplicadas

Técnicas activas

aria-live polite

Herramienta
Region wrapper con role=status
Cobertura
WAI-ARIA Live Regions

El Toast se anuncia en una región aria-live=polite. Si es error crítico, aria-live=assertive. La diferencia importa para SR: assertive interrumpe; polite espera al siguiente hueco de habla.

No información que requiera acción inmediata

Herramienta
OPA policy
Cobertura
Toast con CTAs

Si el contenido del Toast requiere que el usuario actúe (no solo informar), debe ser Modal o Banner. La regla evita que decisiones críticas se pierdan en cinco segundos.

Pause on hover y on focus

Herramienta
Listener de focus + hover
Cobertura
WCAG SC 2.2.1 Timing Adjustable

Si el usuario pasa el cursor o tabula al Toast, el contador de auto-cerrado se pausa. Permite leer el contenido sin presión de tiempo.

Estado físico

Agentic-consumable desde noviembre de 2025. La policy es estricta porque el Toast es el componente que más fácil pierde información crítica si se abusa.

Estados soportados

entering (animación slide-up), visible (cuenta regresiva), paused (hover/focus activo), dismissing (animación slide-down). El cierre manual es opcional y nunca obligatorio para que el Toast desaparezca.

Composiciones prohibidas

Reglas activas

Toast con acción crítica

Herramienta
OPA · block level
Cobertura
Separación Toast vs Modal

Si el CTA del Toast requiere respuesta para que el flujo siga, es Modal. El Toast admite solo acciones reversibles (Deshacer, Ver detalle).

Toast apilado > 3 simultáneos

Herramienta
OPA · warning
Cobertura
Límite cognitivo

La cuarta notificación se encola hasta que una de las tres visibles se cierre.

Toast sin aria-live

Herramienta
OPA · block level
Cobertura
SC 4.1.3 Status Messages

Obligatorio. polite para éxito e info; assertive para error crítico.

Toast con duration < 5s y CTA presente

Herramienta
OPA · block level
Cobertura
Tiempo de lectura

Si hay CTA reversible, duration mínimo 15s. Si no, el usuario no llega a decidir.

Interoperabilidad

  • Consumido por: ToastRegion (singleton en la esquina bottom-right por defecto).
  • Consume: Icon (12×12, opcional), Button variant=link para el CTA reversible.
  • Con qué compone mal: simultáneo con Modal (el Modal dim oculta Toasts; se pausa la región hasta cerrar Modal), con Banner persistente del mismo tipo (redundante).
  • Sustituibles por: Banner si la información debe permanecer visible; Modal si requiere acción crítica; Badge si es solo estado pasivo.

Medición propuesta

Eventos planificados

toast.auto_dismiss

Herramienta
OTLP · Events
Cobertura
Cerrado por timeout

Atributos: variant, duration configurado, duration real (contando pauses). Ayuda a ajustar duration canónico.

toast.action_taken

Herramienta
OTLP · Metrics
Cobertura
Click en CTA reversible

Ratio de CTAs accionadas vs ignoradas. CTAs con ratio <10% sugieren que el Toast no era la forma correcta.

Mutación plástica (Estado 3)

Qué muta y qué permanece

Duration duration = derive(cta-presente × user-pref)

Toast con CTA reversible extiende a 15s. Sin CTA, 5s default. Si el usuario declara prefers-reduced-motion también implica tempo más pausado, se extiende a 8s sin CTA.

Animación de entrada motion = derive(prefers-reduced-motion)

Con reduced-motion, aparición sin slide: solo fade-in opcional o aparición directa.

Posición region = derive(viewport × orientation)

Mobile bottom-center; desktop bottom-right. En landscape mobile, top-center para no tapar hit-targets del teclado virtual.

Pause on hover/focus pause = siempre activa

Fijo. El sistema nunca desactiva pause on hover, ni siquiera en touch (el long-press cuenta como hover).

Fijo por contract aria-live semántica · límite 3 simultáneos · no acción crítica

Contract inviolable.

Rollback si la mutación propone ocultar un CTA reversible por compacidad (el usuario perdería la oportunidad de deshacer) o si quita la pause on hover.

Genealogía

Árbol de evolución

Toast con setTimeout simple

Sin pause on hover. Sin aria-live. Inaccesible.

Consumidor Producto · 8 productos

Toast con aria-live + Floating UI

Implementación accesible. Sortable region en bottom-right.

Consumidor Producto · 22 productos

Toast governable

Pause on hover/focus. Policy OPA contra acciones críticas. Auditoría WCAG completa.

Consumidor Producto · 28 productos

Toast.AI · expuesto vía MCP

Schema con tipos válidos y restricción de payload accionable.

Consumidor Humano + agente

Notas del editor

Descartes catalogados

Variants rechazadas

variant='persistent'

Toast que no se auto-cerraba. Indistinguible de Banner. Reescrito como Banner cuando el patrón aplicaba.

variant='blocking-action'

Toast con CTA crítico que bloqueaba el resto de la pantalla hasta acción. Es Modal, no Toast. Promovido a Modal.

variant='stacked-six'

Hasta seis Toasts apilados simultáneamente. Cognitivamente abusivo, lecturas SR incomprensibles. Limitado a tres simultáneos máximo.

Referencias cruzadas