fn-design-system/components/indicator.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
indicator	component	ts	ui	1.0.0	impure	FnIndicator(props: FnIndicatorProps): JSX.Element	Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator.	mantine indicator badge notification dot component ui				false		@mantine/core	react	name type required description children ReactNode true Elemento sobre el cual se posiciona el indicador name type required description color MantineColor false Color del indicador, default red name type required description size number false Tamano del dot en px, default 10 name type required description position 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' false Posicion del indicador, default top-end name type required description processing boolean false Animacion de pulso, default false name type required description disabled boolean false Oculta el indicador, default false name type required description label ReactNode false Contenido dentro del indicador (numero, texto)	Elemento hijo con un dot/badge indicador posicionado en una esquina	false			frontend/functions/ui/indicator.tsx		false

Ejemplo

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

{/* Dot simple */}
<FnIndicator processing>
  <FnActionIcon icon={<IconBell size={18} />} />
</FnIndicator>

{/* Con contador */}
<FnIndicator label={5} size={16} color="blue">
  <Avatar src="user.png" />
</FnIndicator>

Notas

Wrapper sobre Mantine Indicator. El processing prop agrega una animacion de pulso al dot. Si se provee label, el indicador se agranda para mostrar contenido. disabled oculta el indicador sin desmontar el componente.