Getting Started with KendoReact Avatar

The Avatar component is typically used to display images, icons or initials representing people or other entities.

The Avatar component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Basic Usage

The following example demonstrates the Avatar in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Avatar } from '@progress/kendo-react-layout';

const firstContactImage = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';
const secondContactImage = 'https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg';

const contactImages = [
    { avatar: firstContactImage, name: 'Michael Holz', position: 'Manager' },
    { avatar: secondContactImage, name: 'André Stewart', position: 'Product Manager' }
];

const contactInitials = [
    { avatar: 'JS', name: 'Jason Smith', position: 'UX Designer' },
    { avatar: 'GP', name: 'George Porter', position: 'Software Engineer' }
];

class App extends React.Component {
    render() {
        return (
            <div style={{
                width: 280,
                margin: 'auto',
                padding: '4px 10px',
                boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08)'
            }}
            >
                <div className="contact-list" style={{ textAlign: 'center', padding: 4, fontSize: 20 }}>Contacts</div>
                <div style={{ padding: '8px 14px', marginBottom: '4px', boxShadow: '0 1px 2px #ccc' }}>
                    {
                        contactInitials.map(contact => {
                            return (
                                <div className="k-hbox">
                                    <Avatar shape='circle' type='initials'>{contact.avatar}</Avatar>
                                    <div>
                                        <h2 style={{ fontSize: '1.3em', fontWeight: 'normal', margin: 0 }}>{contact.name}</h2>
                                        <p style={{ marging: 0, fontSize: '0.8em' }}>{contact.position}</p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div style={{ padding: '8px 14px', marginBottom: '4px', boxShadow: '0 1px 2px #ccc' }}>
                    <div className="k-hbox">
                        {
                            contactImages.map(contact => {
                                return (
                                    <div className="k-hbox">
                                        <Avatar shape='circle' type='image'><img src={contact.avatar} /></Avatar>
                                        <div>
                                            <h2 style={{ fontSize: '1.3em', fontWeight: 'normal', margin: 0 }}>{contact.name}</h2>
                                            <p style={{ marging: 0, fontSize: '0.8em' }}>{contact.position}</p>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div style={{ padding: '8px 14px', marginBottom: '4px', boxShadow: '0 1px 2px #ccc' }}>
                    <div className="k-hbox">
                        <Avatar shape="'circle'" type='icon'><span className='k-icon k-i-user' /></Avatar>
                        <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
                            <h2>Unknown</h2>
                            <p>Not specified</p>
                        </div>
                        <div className="k-hbox"></div>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Functionality and Features