FloatingActions

Botón flotante y arrastrable que despliega N acciones configuradas por JSON. Cada acción puede abrir un modal, ejecutar una función o disparar cualquier lógica.

pnpm dlx nuvo-ui add floating-actions

Demo

Clic en el botón inferior derecho para ver las acciones. Puedes arrastrarlo.

Nota: El botón es arrastrable. Haz click y mantenlo presionado para moverlo a cualquier posición de la pantalla. Suelta sin arrastrar para abrir/cerrar el menú.

FloatingActions — grupo

Configura N acciones via un array de objetos. Ideal para pantallas de detalle o CRUD.

import { FloatingActions, type FloatingAction } from "@/components/ui/floating-actions"
import { Pencil, Trash2, Download } from "lucide-react"

const actions: FloatingAction[] = [
  {
    key:     "edit",
    label:   "Editar",
    icon:    <Pencil size={16} />,
    variant: "info",
    onClick: () => setEditOpen(true),      // abre tu modal
  },
  {
    key:     "export",
    label:   "Exportar CSV",
    icon:    <Download size={16} />,
    variant: "success",
    onClick: () => handleExport(),
  },
  {
    key:      "delete",
    label:    "Eliminar",
    icon:     <Trash2 size={16} />,
    variant:  "danger",
    onClick:  () => setDeleteOpen(true),
    disabled: !canDelete,               // deshabilitar condicionalmente
  },
]

export default function Page() {
  return (
    <>
      {/* tu contenido */}
      <FloatingActions actions={actions} />
    </>
  )
}

FloatingButton — acción única

Cuando solo necesitas un botón flotante sin menú desplegable.

import { FloatingButton } from "@/components/ui/floating-actions"
import { Plus } from "lucide-react"

<FloatingButton
  label="Nuevo registro"
  icon={<Plus size={16} />}
  variant="success"
  onClick={() => setCreateOpen(true)}
/>

Icono y color del botón principal

Personaliza el icono y la variante del botón toggle de FloatingActions.

// Icono personalizado + variante en el botón principal
import { Settings } from "lucide-react"

<FloatingActions
  actions={actions}
  icon={<Settings size={18} />}
  variant="warning"
/>

Nota: El icono solo aplica al estado cerrado. Cuando el menú está abierto siempre muestra una X para cerrar.

Props — FloatingActions

Prop	Tipo	Default	Descripción
actions	FloatingAction[]	—	Array de acciones configuradas como JSON. Ver tabla FloatingAction abajo.
variant	"default" \| "success" \| "warning" \| "info" \| "danger"	"default"	Color del botón principal de toggle.
icon	ReactNode	—	Icono del botón principal en estado cerrado. Por defecto: grid 2x2.

Props — FloatingButton

Prop	Tipo	Default	Descripción
label	string	—	Texto visible del botón y su tooltip.
onClick	() => void	—	Función ejecutada al hacer clic (no al arrastrar).
icon	ReactNode	—	Icono a la izquierda del texto. Por defecto: +
variant	"default" \| "success" \| "warning" \| "info" \| "danger"	"default"	Color de fondo del botón.
disabled	boolean	false	Deshabilita el botón.

Tipo FloatingAction

Prop	Tipo	Default	Descripción
key	string	—	Identificador único de la acción (usado como React key).
label	string	—	Texto de la etiqueta flotante y del tooltip.
icon	ReactNode	—	Icono del botón individual. Por defecto: +
onClick	() => void	—	Función ejecutada al seleccionar la acción.
variant	"default" \| "success" \| "warning" \| "info" \| "danger"	"default"	Color del botón y de la etiqueta de esa acción.
disabled	boolean	false	Deshabilita la acción individual.