Aviso con acción.
Patrón canónico de aviso con acción para todos los consumidores.
Verlo por niveles
Primero el componente, después la variación de marca y finalmente su uso dentro de una página.
Ver y copiar el código de este render
<aside class="ui-sample ui-feedback ui-notice" data-notice="action" role="alert" aria-live="assertive"><div><strong>No pudimos guardar</strong><p>Los campos se conservan; vuelve a intentar.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Reintentar</button></div></div><button class="btn btn--icon" type="button" aria-label="Cerrar aviso" data-notice-close="">×</button></aside>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia en esta marca
- Navegación y contenido propios del servicio
- Acento reservado para acciones y datos
Permanece canónico
- Mark CIS y namebrand de tres líneas
- IBM Plex Sans, foco, espaciado y anatomía
COCHID
Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.mdCambia en esta marca
- Cuadrado azul y namebrand de tres líneas
- Azul COCHID en selección, capas y series
Permanece canónico
- Estructura y semántica comunes
- Fuentes, unidades y alternativa tabular
Comparación histórica recuperable
Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.
- Estado actual
- Aviso con acción no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Aviso con acción para Patrón canónico de aviso con acción para todos los consumidores.
- Qué ocurre si respondes No
- Aviso con acción queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulación.
Preparando comparación histórica…
Antes / r19
La comparación convierte una regla abstracta en una diferencia visible y verificable.
- Usa HTML semántico, foco visible y estados explícitos.
- Conserva contenido útil a 320 px y sin JavaScript.
EN LÍNEATodo funciona correctamenteSin señal, hora ni servicio asociado
- No agregues sombras, radios ni franjas laterales decorativas.
- No uses color, placeholder o icono como única explicación.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
Cobertura
| Dimensión | Contrato |
|---|---|
| Propietario canónico | Sistema de diseño CIS · core/core-style |
| Consumidores | Todos los consumidores |
| Dependencias | HTML nativo, ARIA sólo cuando aporta |
| Estado | candidato |
Evidencia de adopción
Patrón propuesto. 0 implementaciones observadas en 0 repositorios.
La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón propuesto |
| Implementaciones | 0 implementaciones observadas |
| Repositorios | Ningún repositorio observado |
| Snapshot | kit/componentes/componentes-observados.json |
Consumidores observados
El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.
Estados
| Estado requerido |
|---|
| información |
| advertencia |
| error |
| éxito |
Accesibilidad
- Conserva nombre accesible, orden de lectura y foco visible.
- Funciona a 320 px, con zoom de 200% y texto largo.
- El color nunca es la única señal de estado o acción.
- El contenido esencial permanece disponible sin JavaScript.
Código HTML
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<aside class="ui-sample ui-feedback ui-notice" data-notice="action" role="alert" aria-live="assertive"><div><strong>No pudimos guardar</strong><p>Los campos se conservan; vuelve a intentar.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Reintentar</button></div></div><button class="btn btn--icon" type="button" aria-label="Cerrar aviso" data-notice-close="">×</button></aside>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<aside class="ui-sample ui-feedback ui-notice border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-notice="action" role="alert" aria-live="assertive"><div><strong>No pudimos guardar</strong><p>Los campos se conservan; vuelve a intentar.</p><div class="ui-actions"><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Reintentar</button></div></div><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Cerrar aviso" data-notice-close="">×</button></aside>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { MouseEventHandler } from 'react';
export interface NoticeActionProps {
title?: string;
description?: string;
actionLabel?: string;
actionHref?: string;
onAction?: MouseEventHandler<HTMLElement>;
closeLabel?: string;
onClose?: MouseEventHandler<HTMLButtonElement>;
/** Destino de foco tras el cierre nativo; sin él se recupera el foco anterior. Con onClose lo restaura el consumidor. */
returnFocusId?: string;
className?: string;
}
/** Aviso que requiere una decisión. Nunca se retira con un temporizador. */
export function NoticeAction({title='No pudimos guardar',description='Los campos se conservan; vuelve a intentar.',actionLabel='Reintentar',actionHref,onAction,closeLabel='Cerrar aviso',onClose,returnFocusId,className}:NoticeActionProps){
return <aside className={['ui-feedback ui-notice',className].filter(Boolean).join(' ')} data-notice="action" data-notice-return-focus={returnFocusId} role="alert" aria-live="assertive">
<div>{title?<strong>{title}</strong>:null}{description?<p>{description}</p>:null}{actionLabel?<div className="ui-actions">{actionHref!==undefined?<a className="btn btn--secondary" href={actionHref} onClick={onAction}>{actionLabel}</a>:<button className="btn btn--secondary" type="button" onClick={onAction}>{actionLabel}</button>}</div>:null}</div>
{closeLabel?<button className="btn btn--icon" type="button" aria-label={closeLabel} data-notice-close={onClose?undefined:''} onClick={onClose}>×</button>:null}
</aside>;
}