fn-design-system/components/action_icon.md

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.