Files
fn_registry/frontend/functions/ui/action_icon.md
T
egutierrez 2d108c295a refactor: migrate frontend from shadcn/Tailwind to Mantine v9
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 23:46:44 +02:00

2.0 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, framework, props, output, tested, tests, test_file_path, file_path, emits, has_state, variant
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports framework props output tested tests test_file_path file_path emits has_state variant
action_icon component ts ui 1.0.0 impure FnActionIcon(props: FnActionIconProps): JSX.Element Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon.
mantine
button
icon
action
tooltip
component
ui
false
@mantine/core
react
name type required description
icon ReactNode true Icono a renderizar dentro del boton
name type required description
variant 'filled' | 'light' | 'outline' | 'transparent' | 'default' | 'subtle' false Variante visual del boton, default 'default'
name type required description
size MantineSize | number false Tamano del boton
name type required description
color MantineColor false Color del boton
name type required description
onClick MouseEventHandler false Callback al hacer click
name type required description
loading boolean false Muestra spinner de carga
name type required description
disabled boolean false Deshabilita el boton
name type required description
tooltip string false Si se provee, envuelve el boton en un Tooltip
Boton de icono con tooltip opcional, estados loading/disabled y multiples variantes false
frontend/functions/ui/action_icon.tsx
false
filled
light
outline
transparent
default
subtle

Ejemplo

import { FnActionIcon } from '@fn_library'
import { IconSettings } from '@tabler/icons-react'

<FnActionIcon
  icon={<IconSettings size={18} />}
  tooltip="Configuracion"
  variant="light"
  onClick={() => openSettings()}
/>

Notas

Wrapper sobre Mantine ActionIcon. Si se provee tooltip, envuelve automaticamente en Mantine Tooltip. Compatible con iconos de @tabler/icons-react.