Toolbar de embed.

Patrón canónico de toolbar de embed para cochid-graphs, mapas, periodismo2 y firmas y documentos.

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

Nivel 2Compañía de Innovación de Santiago · variación

Nivel 3Dentro de una página

Sitio · sección

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<div class="ui-sample ui-actions" data-embed-toolbar="true" role="toolbar" aria-label="Acciones del contenido incorporado"><button class="btn btn--secondary btn--sm" type="button">Abrir</button><button class="btn btn--secondary btn--sm" type="button">Descargar</button><button class="btn btn--secondary btn--sm" type="button">Copiar enlace</button></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.

cochid.cl

COCHID

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

Cambia 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

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

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

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

Mantén proporción, título accesible, fuente y vista completa.
Proporciona consentimiento y fallback cuando depende de terceros.

Antes · problema observadoAnti-ejemplo no interactivo

Contenido incorporadoRectángulo vacío sin fuente, fallback ni vista completa

No cargues terceros sin política CSP y privacidad.
No dejes un rectángulo vacío cuando falla el origen.

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

1280 pxEscritorio

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y servicio productor · core/core-style
Consumidores	cochid-graphs, Mapas, Periodismo2 y Firmas y Documentos
Dependencias	CSP, sandbox, fallback enlazable
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 Toolbar de embed

Estados

Estado requerido
cargando
disponible
bloqueado
error
sin JavaScript

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" data-embed-toolbar="true" role="toolbar" aria-label="Acciones del contenido incorporado"><button class="btn btn--secondary btn--sm" type="button">Abrir</button><button class="btn btn--secondary btn--sm" type="button">Descargar</button><button class="btn btn--secondary btn--sm" type="button">Copiar enlace</button></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" data-embed-toolbar="true" role="toolbar" aria-label="Acciones del contenido incorporado"><button class="btn btn--secondary btn--sm border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Abrir</button><button class="btn btn--secondary btn--sm border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Descargar</button><button class="btn btn--secondary btn--sm border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Copiar enlace</button></div>

Código REACT

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

Código de referencia

import type { MouseEventHandler } from "react";

export interface EmbedToolbarItem {
  /** Nombre de la acción sobre el contenido incorporado. */
  label: string;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface EmbedToolbarProps {
  /** Nombre accesible de la barra (`aria-label`). */
  label?: string;
  /** Acciones, en orden. */
  items?: EmbedToolbarItem[];
  className?: string;
}

const EMBED_TOOLBAR_ITEMS: EmbedToolbarItem[] = [
  { label: "Abrir" },
  { label: "Descargar" },
  { label: "Copiar enlace" },
];

/**
 * Barra de acciones sobre un contenido incorporado (abrir, descargar, copiar enlace); va junto al contenido al que se refiere.
 *
 * Usa `role="toolbar"`; cada acción es un botón secundario pequeño del kit y una acción que no aplica al contenido actual va con `disabled`.
 *
 * @example <EmbedToolbar items={[{ label: "Abrir", onClick: abrir }, { label: "Descargar", onClick: descargar }, { label: "Restablecer vista", onClick: restablecer }]} />
 * @example <EmbedToolbar label="Acciones del mapa" items={[{ label: "Descargar", disabled: true }]} />
 */
export function EmbedToolbar({ label = "Acciones del contenido incorporado", items = EMBED_TOOLBAR_ITEMS, className }: EmbedToolbarProps) {
  if (!items.length) return null;
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")} data-embed-toolbar role="toolbar" aria-label={label || undefined}>
      {items.map((item, indice) => (
        <button key={`${item.label}-${indice}`} className="btn btn--secondary btn--sm" type="button" disabled={item.disabled} onClick={item.onClick}>{item.label}</button>
      ))}
    </div>
  );
}