Ficha
- Categoría
- Actions
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 393:9385
- Fuente
design-system/componentes/IconButton.md
Acción solo con ícono: círculo visual de 40 dentro de un objetivo táctil de 44 (DV-25). primary = relleno (enviar) · ghost = solo ícono (micrófono, cerrar) · elevated = círculo blanco con Shadow/Card para controles que flotan sobre contenido (flechas de carrusel).
Cuándo usarlo
- Una acción única y universalmente entendida junto a un campo o en una barra (enviar, dictar, cerrar, reproducir).
- elevated: navegación del carrusel («Anterior», «Siguiente») en el borde visible, centrada en las tarjetas.
Cuándo NO usarlo
- Acciones que necesitan una palabra para entenderse → Button con etiqueta.
Anatomía
<button aria-label> de 44×44 (sm 36) con padding 2 · <span> círculo de 40 (sm 32) · Icon 20 (sm 16).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
icon | Icon (swap) | nombre de ícono | — |
label | — (aria-label; en Figma, la descripción lo exige) | verbo: «Enviar», «Dictar», «Cerrar» | — |
variant | Variant | primary · ghost · elevated | primary |
size | Size | md · sm | md |
disabled | State=disabled | boolean | false |
Estados
default · hover · focus (anillo 2 px sobre el círculo) · pressed · disabled (aria-disabled; elevated pierde la sombra, como en Figma).
Accesibilidad
- role=button con aria-label (el ícono es decorativo); Enter/Espacio.
- Foco visible 2 px borders/brand/focus sobre el círculo.
- Deshabilitado con aria-disabled, no con opacidad.
Contenido
El aria-label es un verbo («Enviar», «Dictar», «Cerrar»).
Errores conocidos
- Ninguno medido (test
@DV-25: 44×44 y nombre accesible).
Changelog
- 2026-10-26 · nace (T-02).