IconButton

IconButton renderiza un botón cuadrado que contiene un único ícono. Soporta colores del tema, tres variantes visuales (solid, outline, clear), cinco presets de tamaño y retroalimentación sutil de presión. Es el bloque de construcción de muchos otros componentes de la librería — CartButton, ActionsMenuButton y LockToggleButton lo usan internamente.

Usa IconButton para acciones de barra de herramientas, controles de fila en tablas y cualquier lugar donde un botón con etiqueta sea demasiado ancho.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onClick | (e: React.MouseEvent<any>) => void | Sí | — | Callback que se dispara cuando se presiona el botón. Recibe el evento del mouse. | | icon | string | No | — | Identificador del ícono mostrado dentro del botón. | | iconPaths | any[] | No | — | Datos de path SVG para un ícono personalizado (alternativa a icon). | | iconSize | number | No | — | Tamaño del ícono en píxeles (sobreescribe el tamaño calculado). | | color | string | No | "primary" | Clave de color del tema o cualquier color CSS (hex o nombre). | | type | "clear" \| "outline" \| "solid" | No | "solid" | Variante visual del botón. | | borderRadius | number | No | 22 | Radio del borde en píxeles. El valor por defecto produce un botón circular. | | disabled | boolean | No | false | Deshabilita la interacción y reduce la opacidad. | | hasShadow | boolean | No | true | Si se aplica sombra al botón. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el ancho, alto y tamaño del ícono del botón. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al elemento botón. |

Uso

Básico

import IconButton from '@/components/buttons/IconButton';

export default function Example() {
  return (
    <IconButton
      icon="edit"
      onClick={() => console.log('editar')}
    />
  );
}

Botón outline de peligro

import IconButton from '@/components/buttons/IconButton';

export default function Example() {
  return (
    <IconButton
      icon="trash"
      type="outline"
      color="danger"
      size="sm"
      onClick={() => console.log('eliminar')}
    />
  );
}

Estilo clear para barras de herramientas

import IconButton from '@/components/buttons/IconButton';

export default function Toolbar() {
  return (
    <div style={{ display: 'flex', gap: 4 }}>
      <IconButton icon="bold" type="clear" hasShadow={false} onClick={() => {}} />
      <IconButton icon="italic" type="clear" hasShadow={false} onClick={() => {}} />
      <IconButton icon="underline" type="clear" hasShadow={false} onClick={() => {}} />
    </div>
  );
}