---
name: icon_button
kind: component
lang: cpp
domain: core
version: "1.0.0"
purity: pure
signature: "bool fn_ui::icon_button(const char* id, const char* glyph, const char* tooltip = nullptr)"
description: "Boton cuadrado 28x28 con glyph UTF-8 centrado y tooltip opcional. Estilo subtle (transparente con hover). Apto para toolbars."
tags: [imgui, button, icon, ui, toolbar, tokens]
uses_functions: ["tokens_cpp_core"]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [imgui]
tested: true
tests:
  - "compiles and links against Catch2 (placeholder, visual cubierto en 0048)"
test_file_path: "cpp/tests/test_icon_button.cpp"
file_path: "cpp/functions/core/icon_button.cpp"
framework: imgui
params:
  - name: id
    desc: "Id unico ImGui (prefijar con ## si no quieres texto visible ademas del glyph)"
  - name: glyph
    desc: "Cadena UTF-8 del icono (e.g. \\xe2\\x86\\xbb para reload). Debe existir en el atlas de la fuente activa"
  - name: tooltip
    desc: "Texto del tooltip al hover (opcional, null para omitir)"
output: "true el frame en que se hace click"
---

# icon_button

Boton cuadrado de 28x28px con un glyph UTF-8 centrado. Estilo subtle (sin fondo hasta hover) pensado para toolbars compactas.

## Glyphs utiles

| UTF-8 (`\x..`) | Unicode | Visual | Uso |
|---|---|---|---|
| `\xe2\x86\xbb` | U+21BB | ↻ | Reload |
| `\xe2\x9c\x8f` | U+270F | ✏ | Edit |
| `\xef\x80\x8c` | U+F00C | ✓ | Check (FontAwesome) |
| `\xe2\x9e\x95` | U+2795 | ➕ | Add |
| `\xe2\x9d\x8c` | U+274C | ❌ | Delete |
| `\xe2\x96\xbc` | U+25BC | ▼ | Dropdown |
| `\xe2\x9a\x99` | U+2699 | ⚙ | Settings |

Asegurate de que el glyph este en el rango de la fuente (anadir a `ImFontAtlas::GetGlyphRangesDefault` + rangos simbolicos si hace falta).

## Ejemplo

```cpp
if (fn_ui::icon_button("##reload", "\xe2\x86\xbb", "Reindex")) reindex();
if (fn_ui::icon_button("##add",    "\xe2\x9e\x95", "Add..."))   open_menu();
```

## Notas — Tabler Icons (preferido)

La tabla de glyphs UTF-8 de arriba es **historica**. A partir de la integracion de `icon_font_cpp_core` + `core/icons_tabler.h`, el atlas activo en cualquier app que use `fn::run_app` es Tabler v3.41.1 (5093 glyphs en U+E000..U+FCFF). Los hex UTF-8 inline (`\xe2\x9a\x99`, etc.) **NO renderizan** porque la fuente default de ImGui no incluye esos codepoints.

Patron correcto:

```cpp
#include "core/icon_button.h"
#include "core/icons_tabler.h"

if (icon_button("##reload",   TI_REFRESH,        "Reindex"))   reindex();
if (icon_button("##add",      TI_PLUS,           "Add..."))    open_menu();
if (icon_button("##settings", TI_SETTINGS,       "Settings"))  open_settings();
if (icon_button("##save",     TI_DEVICE_FLOPPY,  "Save"))      save();
if (icon_button("##delete",   TI_TRASH,          "Delete"))    confirm();
```

`icon_button` no cambia — sigue aceptando `const char*` en `glyph`. Lo unico que cambia es **donde** sacas la cadena: `TI_*` macro, no UTF-8 hex inline. Ver `cpp/DESIGN_SYSTEM.md` seccion 11 para la regla completa y anti-patrones.
