Skip to content
Mi Design System

ActionIcon

El componente ActionIcon es un elemento de interacción compacto diseñado para ejecutar acciones directas mediante un ícono visual, optimizando el espacio en la interfaz.

Previsualización Rápida

Section titled “Previsualización Rápida”
Filled
Outline
White
Subtle
Subtle Light

Cuándo usar este componente

Section titled “Cuándo usar este componente”
  • Acciones secundarias o frecuentes: Ideal para barras de herramientas, cabeceras de tarjetas, tablas de datos y controles de reproductores.
  • Espacio reducido: Cuando el contexto visual permite entender la función sin necesidad de un texto explícito.
  • Iconografía universal: Utilízalo únicamente con íconos cuyo significado sea inequívoco para el usuario (ej: buscar, cerrar, editar, eliminar, ajustar).

Variantes (variant)

Section titled “Variantes (variant)”
  • filled: Acción principal del contenedor. Posee alto peso visual.
  • outline: Para acciones secundarias que requieren delimitar su área clickeable.
  • white: Utilizado sobre fondos coloreados o imágenes con elevación sutil.
  • subtle: Integración limpia en listas o barras de herramientas; se activa al pasar el cursor.
  • subtle-dark: Diseñado específicamente para destacar sobre contenedores de fondo claro.
  • subtle-light: Diseñado para mantener contraste adecuado sobre contenedores oscuros.

Colores (color)

Section titled “Colores (color)”
  • primary: Tono institucional por defecto (var(--primary-color-5)).
  • secondary: Para acciones alternativas dentro del mismo flujo (var(--secondary-color-5)).
  • destructive: Exclusivo para acciones críticas e irreversibles como eliminar o cancelar.
  • any: Para casos especiales de categorización o personalización visual.

Tamaños (size)

Section titled “Tamaños (size)”
Tamaño Dimensión Pauta de Diseño / Jerarquía
3xl 56px Acciones flotantes principales (FAB) o hero banners.
2xl 48px Encabezados de pantalla, modales y layouts espaciosos.
lg 32px Estándar del sistema. Tablas de datos, formularios y headers de tarjeta.
md 24px Interfaces densas, tags complejos o controles compactos en línea.

Estados (disabled)

Section titled “Estados (disabled)”

El estado disabled reduce la opacidad visual y desactiva el cursor para comunicar que la acción no está disponible bajo las condiciones actuales del sistema.