Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to KendoReact? Start a free 30-day trial

Appearance

The Аvatar allows you to set different styles based on its content.

Shape and Type

The available type are:

  • Image By passing an img element as child element of the Avatar.
  • Text avatarBy passing an given string to be rendered as text (initials).
  • Icon avatarBy passing icon to the Avatar component.

All of the options can be rendered in a different shape by setting the shape property.

The available shape values are:

  • circleRenders a circle shape avatar.
  • roundedRenders an avatar with rounded borders.
  • rectangleRenders an avatar with a rectangle shape.
  • square(Default)Renders a square shape avatar.

The following example demonstrates the type and shape options of the Avatar.

Example
View Source
Edit In Stackblitz  
Change Theme:

Theme Color

The Аvatar allows you to specify predefined theme colors.

The available themeColor values are:

  • primary (Default)Applies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • inherit Applies inherited coloring value.
  • infoApplies coloring based on info theme color.
  • success Applies coloring based on success theme color.
  • warning Applies coloring based on warning theme color.
  • error Applies coloring based on error theme color.
  • dark Applies coloring based on dark theme color.
  • light Applies coloring based on light theme color.
  • inverse Applies coloring based on inverted theme color.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?