Copiar.

<div class="ui-sample ui-actions"><code>https://datos.cochid.cl/serie/184</code><button class="btn btn--secondary" type="button" data-copy-value="https://datos.cochid.cl/serie/184">Copiar</button><span role="status"></span></div>

<div class="ui-sample ui-actions border border-slate-300 bg-white p-4 text-slate-950"><code>https://datos.cochid.cl/serie/184</code><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" data-copy-value="https://datos.cochid.cl/serie/184">Copiar</button><span role="status"></span></div>

import type { MouseEventHandler } from "react";

export interface CopyActionProps {
  /** Texto que se muestra y se copia (enlace, identificador, comando). */
  value?: string;
  /** Texto del botón. */
  label?: string;
  /** Mensaje de la región `role="status"` después de copiar; vacío mientras no se copia. */
  status?: string;
  /** Se llama al pulsar el botón; el valor a copiar está en `data-copy-value`. */
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Valor visible con botón para copiarlo al portapapeles; se usa para enlaces, identificadores o comandos que la persona pega en otro lugar.
 *
 * La región `role="status"` existe siempre, vacía, para que el lector de pantalla anuncie `status` cuando cambie.
 *
 * @example <CopyAction value="https://datos.cochid.cl/serie/184" />
 * @example <CopyAction value="SOL-2026-00184" status="Copiado" />
 */
export function CopyAction({
  value = "https://datos.cochid.cl/serie/184",
  label = "Copiar",
  status = "",
  onClick,
  className,
}: CopyActionProps) {
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")}>
      <code>{value}</code>
      <button className="btn btn--secondary" type="button" data-copy-value={value} onClick={onClick}>{label}</button>
      <span role="status">{status}</span>
    </div>
  );
}