Skip to main content

Develop with FastTrack

Avatar

The Avatar widget displays formatted images, icons, or initials that represent people or other entities in an application. The widget is based on the KendoReact Avatar component.

Avatar example rendering

This example shows the Avatar widget with formatted initials, two images, and an icon.

Avatar example configuration

import { useContext } from "react"; 
import './App.css'; 
import { Avatar } from "ml-fasttrack"; 
   
function App() { 
 
    return ( 
      <div className="App"> 
        <Avatar 
            avatarImage={{ path: 'img', alt: 'Avatar pic' }} 
            rounded="full" 
            type="image" 
            size="medium" 
            data={{ img: 'https://www.example.org/myImage.jpg'}} 
        /> 
      </div> 
    ); 

} 
   
export default App;

Avatar code explanation

In the Avatar example configuration the Avatar widget displays an image from a web host.

The avatarImage prop is used with the data prop as a configuration object.
A path points to the image details in the data object.
Alternatively, an image can be displayed using the children props to pass in an image component.
For additional examples, see the KendoReact Avatar documentation.

Avatar API

Prop	Type	Description
border	boolean	Turns the Avatar border on or off. See the KendoReact AvatarProps.
children	ReactNode	Content wrapped by the Avatar widget. See the KendoReact AvatarProps.
className	string	Class name applied to the widget. See the KendoReact AvatarProps.
fillMode	"null" \| "solid" \| "outline"	Avatar fill mode. See the KendoReact AvatarProps.
rounded	"null" \| "small" \| "medium" \| "large" \| "full"	Avatar roundness. See the KendoReact AvatarProps.
size	"null" \| "small" \| "medium" \| "large"	Avatar size. See the KendoReact AvatarProps.
style	CSSProperties	CSS styles applied to the widget. See the KendoReact AvatarProps.
themeColor	"null" \| "base" \| "primary" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error" \| "dark" \| "light" \| "inverse"	Avatar theme color. See the KendoReact AvatarProps.
type	"image" \| "text" \| "icon"	Avatar type. See the KendoReact AvatarProps.
avatarImage	{ path: string; alt?: string; }	Configuration object used when an image is displayed.
avatarImage.alt	string	Alternative text for the image.
avatarImage.path	string	The JSONPath to the image URL in the `data` prop object. Example: `person.images.image[0].url`.
data	object	Data object used with `avatarImage` property. Includes the image URL as a value.

In this section: