Botón con icono.

Patrón canónico de botón con icono 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

Abrir filtros

Nivel 2Círculo de Santiago · variación

Nivel 3Dentro de una página

Sitio · sección

Abrir filtros

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<div class="ui-sample ui-actions"><button class="btn btn--icon" type="button" aria-label="Abrir filtros" title="Abrir filtros"><span aria-hidden="true">≡</span></button><span>Abrir filtros</span></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

Abrir filtros

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

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

Abrir filtros

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

Abrir filtros

1280 pxEscritorio

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 Botón con icono

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"><button class="btn btn--icon" type="button" aria-label="Abrir filtros" title="Abrir filtros"><span aria-hidden="true">≡</span></button><span>Abrir filtros</span></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"><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="Abrir filtros" title="Abrir filtros"><span aria-hidden="true">≡</span></button><span>Abrir filtros</span></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 IconButtonProps {
  /** Nombre de la acción: va en `aria-label`, en `title` y como texto junto al botón. */
  label?: string;
  /** Carácter del icono (≡, ×, +); se oculta a los lectores de pantalla. */
  icon?: string;
  /** Muestra `label` como texto visible junto al botón. */
  labelVisible?: boolean;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Botón con icono: acción compacta representada por un carácter (abrir filtros, cerrar un panel), con nombre accesible.
 *
 * El nombre va siempre en `aria-label` y `title`; con `labelVisible={false}` queda sólo el icono.
 *
 * @example <IconButton label="Abrir filtros" icon="≡" onClick={abrirFiltros} />
 * @example <IconButton label="Cerrar panel" icon="×" labelVisible={false} onClick={cerrar} />
 */
export function IconButton({
  label = "Abrir filtros",
  icon = "≡",
  labelVisible = true,
  disabled,
  onClick,
  className,
}: IconButtonProps) {
  return (
    <div className={["ui-actions", className].filter(Boolean).join(" ")}>
      <button className="btn btn--icon" type="button" aria-label={label} title={label} disabled={disabled} onClick={onClick}>
        {icon ? <span aria-hidden="true">{icon}</span> : null}
      </button>
      {labelVisible && label ? <span>{label}</span> : null}
    </div>
  );
}