Aviso con ícono de estado.
Patrón canónico de aviso con ícono de estado 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-state-notice" data-state="caution"><svg class="ui-kit-icon" data-kit-icon="triangle-alert" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><circle cx="12" cy="17" r="1.1" fill="currentColor" stroke="none"></circle></svg><div><strong class="ui-state-notice__title">Precaución: cobertura parcial</strong><div class="ui-state-notice__body">Falta una región en este corte. Consulta la fecha y la fuente.</div></div></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 ícono de estado no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Aviso con ícono de estado para Patrón canónico de aviso con ícono de estado para todos los consumidores.
- Qué ocurre si respondes No
- Aviso con ícono de estado 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-state-notice" data-state="caution"><svg class="ui-kit-icon" data-kit-icon="triangle-alert" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><circle cx="12" cy="17" r="1.1" fill="currentColor" stroke="none"></circle></svg><div><strong class="ui-state-notice__title">Precaución: cobertura parcial</strong><div class="ui-state-notice__body">Falta una región en este corte. Consulta la fecha y la fuente.</div></div></aside>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<aside class="ui-state-notice border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-state="caution"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="triangle-alert" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><circle cx="12" cy="17" r="1.1" fill="currentColor" stroke="none"></circle></svg><div><strong class="ui-state-notice__title">Precaución: cobertura parcial</strong><div class="ui-state-notice__body">Falta una región en este corte. Consulta la fecha y la fuente.</div></div></aside>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { ReactNode } from 'react';
import { KitIcon } from './kit-icon';
import type { KitIconName } from './kit-icon';
export type KitState = 'danger' | 'alert' | 'caution' | 'safe' | 'info';
const STATE_ICONS: Record<KitState,KitIconName> = {
danger:'octagon-alert',alert:'siren',caution:'triangle-alert',safe:'circle-check',info:'info',
};
export interface StateNoticeProps {
state: KitState;
title: string;
children?: ReactNode;
/** Un aviso inicial no debe interrumpir al lector. Activar solo al actualizar. */
announce?: boolean;
className?: string;
}
export function StateNotice({state,title,children,announce=false,className}:StateNoticeProps) {
const urgente=state==='danger'||state==='alert';
return <aside className={['ui-state-notice',className].filter(Boolean).join(' ')} data-state={state}
role={announce?(urgente?'alert':'status'):undefined}>
<KitIcon name={STATE_ICONS[state]} size={24}/>
<div><strong className="ui-state-notice__title">{title}</strong>{children?<div className="ui-state-notice__body">{children}</div>:null}</div>
</aside>;
}