Descarga.

Patrón canónico de descarga para todos los sitios y servicios.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Descargar CSVCSV · 16 regiones · 0,2 KB

Nivel 2Círculo de Santiago · variación

Descargar CSVCSV · 0,2 KB · SHA-256 disponible

Nivel 3Dentro de una página

Sitio · sección

Descargar CSVCSV · 16 regiones · 0,2 KB

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<div class="ui-sample ui-actions"><a class="btn btn--secondary" href="data:text/csv;charset=utf-8,codigo,region%0A15,Arica%20y%20Parinacota%0A01,Tarapac%C3%A1%0A02,Antofagasta%0A03,Atacama%0A04,Coquimbo%0A05,Valpara%C3%ADso%0A13,Metropolitana%0A06,O%27Higgins%0A07,Maule%0A16,%C3%91uble%0A08,Biob%C3%ADo%0A09,La%20Araucan%C3%ADa%0A14,Los%20R%C3%ADos%0A10,Los%20Lagos%0A11,Ays%C3%A9n%0A12,Magallanes%0A" download="regiones-de-chile.csv">Descargar CSV</a><small>CSV · 16 regiones · 0,2 KB</small></div>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Descargar CSVCSV · 16 regiones · 0,2 KB

Cambia 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

circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Descargar CSVCSV · 0,2 KB · SHA-256 disponible

Cambia en esta marca

Mark circular y namebrand Círculo de Santiago en caja normal
Contenido societario y navegación propia

Permanece canónico

Misma estructura, orden de cuenta y footer
Tipografía, foco y comportamiento canónicos

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.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Descargar CSVCSV · 16 regiones · 0,2 KB

Usa HTML semántico, foco visible y estados explícitos.
Conserva contenido útil a 320 px y sin JavaScript.

Antes · problema observadoAnti-ejemplo no interactivo

OKContinuarEnviar

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.

320 pxMóvil y zoom

Descargar CSVCSV · 16 regiones · 0,2 KB

1280 pxEscritorio

Descargar CSVCSV · 0,2 KB · SHA-256 disponible

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS · core/core-style
Consumidores	Todos los sitios y servicios
Dependencias	HTML nativo
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.

Ver implementaciones asociadas a Descarga

Estados

Estado requerido
base
hover
focus
disabled
loading

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.

Código de referencia

<div class="ui-sample ui-actions"><a class="btn btn--secondary" href="data:text/csv;charset=utf-8,codigo,region%0A15,Arica%20y%20Parinacota%0A01,Tarapac%C3%A1%0A02,Antofagasta%0A03,Atacama%0A04,Coquimbo%0A05,Valpara%C3%ADso%0A13,Metropolitana%0A06,O%27Higgins%0A07,Maule%0A16,%C3%91uble%0A08,Biob%C3%ADo%0A09,La%20Araucan%C3%ADa%0A14,Los%20R%C3%ADos%0A10,Los%20Lagos%0A11,Ays%C3%A9n%0A12,Magallanes%0A" download="regiones-de-chile.csv">Descargar CSV</a><small>CSV · 16 regiones · 0,2 KB</small></div>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950"><a class="btn btn--secondary underline underline-offset-4" href="data:text/csv;charset=utf-8,codigo,region%0A15,Arica%20y%20Parinacota%0A01,Tarapac%C3%A1%0A02,Antofagasta%0A03,Atacama%0A04,Coquimbo%0A05,Valpara%C3%ADso%0A13,Metropolitana%0A06,O%27Higgins%0A07,Maule%0A16,%C3%91uble%0A08,Biob%C3%ADo%0A09,La%20Araucan%C3%ADa%0A14,Los%20R%C3%ADos%0A10,Los%20Lagos%0A11,Ays%C3%A9n%0A12,Magallanes%0A" download="regiones-de-chile.csv">Descargar CSV</a><small class="text-sm text-slate-600">CSV · 16 regiones · 0,2 KB</small></div>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

export interface DownloadActionProps {
  /** Texto del enlace: verbo y formato («Descargar CSV»). */
  label?: string;
  /** Dirección del archivo. */
  href?: string;
  /** Nombre sugerido del archivo guardado (atributo `download`). */
  download?: string;
  /** Datos del archivo bajo el enlace: formato, tamaño, suma de verificación. */
  description?: string;
  className?: string;
}

/** Archivo por defecto: las 16 regiones de Chile con su código, en CSV (229 bytes). */
const REGIONES_CSV =
  "data:text/csv;charset=utf-8,codigo,region%0A15,Arica%20y%20Parinacota%0A01,Tarapac%C3%A1%0A02,Antofagasta%0A03,Atacama%0A04,Coquimbo%0A05,Valpara%C3%ADso%0A13,Metropolitana%0A06,O%27Higgins%0A07,Maule%0A16,%C3%91uble%0A08,Biob%C3%ADo%0A09,La%20Araucan%C3%ADa%0A14,Los%20R%C3%ADos%0A10,Los%20Lagos%0A11,Ays%C3%A9n%0A12,Magallanes%0A";

/**
 * Enlace de descarga: ofrece un archivo y muestra su formato y tamaño antes de hacer clic.
 *
 * @example <DownloadAction label="Descargar CSV" href="/datos/registro.csv" download="registro.csv" description="CSV · 12 KB" />
 */
export function DownloadAction({
  label = "Descargar CSV",
  href = REGIONES_CSV,
  download = "regiones-de-chile.csv",
  description = "CSV · 16 regiones · 0,2 KB",
  className,
}: DownloadActionProps) {
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")}>
      <a className="btn btn--secondary" href={href} download={download}>{label}</a>
      {description ? <small>{description}</small> : null}
    </div>
  );
}