# Avatar Un avatar muestra una imagen o texto para representar a una persona o grupo, y puede sumar información contextual como presencia o actividad. Si necesitas representar muchas personas, usa un grupo de avatares. ```tsx import { Avatar } from "@fluentui/react-components"; export default function Example() { return ( ); } ``` ## Tipos ### Avatar estándar Los avatares estándar son contenedores circulares que normalmente representan a una persona individual. ```tsx import { Avatar } from "@fluentui/react-components"; export default function Example() { return ( <> ); } ``` ### Avatar de grupo Los avatares de grupo son contenedores cuadrados y representan a muchas personas, como equipos, organizaciones o empresas. ```tsx import { Avatar, AvatarGroup, AvatarGroupItem } from "@fluentui/react-components"; export default function Example() { return ( <> ); } ``` ## Comportamiento ### Insignias de presencia Los avatares pueden incluir insignias de presencia para indicar el estado de una persona asociada. ```tsx import { Avatar } from "@fluentui/react-components"; export default function Example() { return ( <> ); } ``` ### Anillos de actividad Los avatares pueden incluir anillos de actividad para indicar que una persona está colaborando en una actividad compartida, como hablar en una llamada o editar un documento. ```tsx import { Avatar } from "@fluentui/react-components"; export default function Example() { return ( <> ); } ``` ## Accesibilidad En avatares medianos de 32 px o menores, puede ser difícil percibir el icono de una insignia de presencia. Cuando sea posible, acompaña el avatar con texto que represente el estado, como una ayuda emergente o una etiqueta visible. Por defecto, los avatares son elementos estáticos y no tienen estados interactivos incorporados. Si agregas interacción para mostrar más contexto, define estados, foco y comportamiento de teclado. Asegura que cualquier interacción habilitada por el avatar tenga índice de tabulación para que sea accesible a personas que navegan con teclado.