FloatingActionButton

FloatingActionButton renderiza un botón circular de posición fija anclado a la esquina inferior derecha del viewport. Es el patrón mobile-first para exponer la única acción principal en una pantalla — por ejemplo, "Crear nuevo elemento". El botón acepta un ícono y soporta las mismas variantes visuales y presets de tamaño que IconButton.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onClick | () => void | Sí | — | Callback que se dispara cuando se presiona el botón. | | 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 círculo. | | 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. | | zIndex | number | No | 999999 | Z-index CSS del elemento fijo. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al botón. Usa bottom y right para reposicionarlo. |

Uso

Básico

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

export default function Page() {
  return (
    <>
      {/* contenido de la página */}
      <FloatingActionButton
        icon="plus"
        onClick={() => console.log('crear nuevo')}
      />
    </>
  );
}

Posición y color personalizados

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

export default function Page() {
  return (
    <FloatingActionButton
      icon="plus"
      color="success"
      size="lg"
      style={{ bottom: 32, right: 32 }}
      onClick={() => console.log('crear')}
    />
  );
}

Variante outline

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

export default function Page() {
  return (
    <FloatingActionButton
      icon="edit"
      type="outline"
      color="primary"
      onClick={() => console.log('modo edición')}
    />
  );
}