Avatar

The TkAvatar represents a user, labels, and display the images or a brand.

React
Vue
Angular

import { TkAvatar, TkAvatarGroup } from '@takeoff-ui/react'

import { TkAvatar, TkAvatarGroup } from '@takeoff-ui/vue'

import { TkAvatar, TkAvatarGroup } from '@takeoff-ui/angular'

Basic

A simple TkAvatar displaying initials or a default icon.

View Code

React
Vue
Angular

<TkAvatar label="JS" />
<TkAvatar label="AD" rounded />
<TkAvatar />

<TkAvatar label="JS" />
<TkAvatar label="AD" rounded />
<TkAvatar />

<tk-avatar label="JS" />
<tk-avatar label="AD" rounded />
<tk-avatar />

Sizes

Demonstrates various avatar sizes available via the size property.

View Code

React
Vue
Angular

<TkAvatar size="xlarge" rounded label="XL" />
<TkAvatar size="large" rounded label="L" />
<TkAvatar size="base" rounded label="M" />
<TkAvatar size="small" rounded label="S" />
<TkAvatar size="xsmall" rounded label="XS" />

<TkAvatar size="xlarge" rounded label="XL" />
<TkAvatar size="large" rounded label="L" />
<TkAvatar size="base" rounded label="M" />
<TkAvatar size="small" rounded label="S" />
<TkAvatar size="xsmall" rounded label="XS" />

<tk-avatar size="xlarge" rounded label="XL" />
<tk-avatar size="large" rounded label="L" />
<tk-avatar size="base" rounded label="M" />
<tk-avatar size="small" rounded label="S" />
<tk-avatar size="xsmall" rounded label="XS" />

Variants

Showcases different variant levels (variants) of the avatar using the variant property.

View Code

React
Vue
Angular

<TkAvatar background="solid" variant="primary" label="PR" />
<TkAvatar background="solid" variant="light" label="LT" />
<TkAvatar background="solid" variant="success" label="SC" />
<TkAvatar background="solid" variant="info" label="IN" />
<TkAvatar background="solid" variant="warning" label="WN" />
<TkAvatar background="solid" variant="danger" label="DG" />

<TkAvatar background="solid" variant="primary" label="PR" />
<TkAvatar background="solid" variant="light" label="LT" />
<TkAvatar background="solid" variant="success" label="SC" />
<TkAvatar background="solid" variant="info" label="IN" />
<TkAvatar background="solid" variant="warning" label="WN" />
<TkAvatar background="solid" variant="danger" label="DG" />

<tk-avatar background="solid" variant="primary" label="PR" />
<tk-avatar background="solid" variant="light" label="LT" />
<tk-avatar background="solid" variant="success" label="SC" />
<tk-avatar background="solid" variant="info" label="IN" />
<tk-avatar background="solid" variant="warning" label="WN" />
<tk-avatar background="solid" variant="danger" label="DG" />

Avatar with Images

Displays how to use images inside the TkAvatar component.

View Code

React
Vue
Angular

<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="primary" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="light" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="success" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="info" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="danger" rounded />

<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="primary" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="light" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="success" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="info" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="danger" />

<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="primary" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="light" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="success" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="info" rounded />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="danger" rounded />

<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="primary" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="light" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="success" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="info" />
<TkAvatar image="https://via.placeholder.com/40" background="solid" variant="danger" />

<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="primary" rounded />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="light" rounded />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="success" rounded />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="info" rounded />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="danger" rounded />
    
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="primary" />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="light" />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="success" />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="info" />
<tk-avatar image="https://via.placeholder.com/40" background="solid" variant="danger" />

Avatar with Badges

Illustrates adding badges to avatars using the badge and badgeStatus properties.

View Code

React
Vue
Angular

<TkAvatar image="https://via.placeholder.com/40" background="solid" badge badgeStatus="success" rounded />
<TkAvatar image="https://via.placeholder.com/40" badge badgeStatus="warning" rounded />
<TkAvatar label="AD" badge badgeStatus="danger" rounded />

<TkAvatar image="https://via.placeholder.com/40" background="solid" badge badgeStatus="success" rounded />
<TkAvatar image="https://via.placeholder.com/40" badge badgeStatus="warning" rounded />
<TkAvatar label="AD" badge badgeStatus="danger" rounded />

<tk-avatar image="https://via.placeholder.com/40" background="solid" badge badgeStatus="success" rounded />
<tk-avatar image="https://via.placeholder.com/40" badge badgeStatus="warning" rounded />
<tk-avatar label="AD" badge badgeStatus="danger" rounded />

Avatar Group

Shows how to group multiple avatars together using the TkAvatarGroup component.

View Code

React
Vue
Angular

<TkAvatarGroup>
  <TkAvatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <TkAvatar variant="light" background="solid" rounded label="+4" />
</TkAvatarGroup>
<TkAvatarGroup compact>
  <TkAvatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <TkAvatar variant="light" background="solid" rounded label="+4" />
</TkAvatarGroup>

<TkAvatarGroup>
  <TkAvatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <TkAvatar variant="light" background="solid" rounded label="+4" />
</TkAvatarGroup>
<TkAvatarGroup compact>
  <TkAvatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <TkAvatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <TkAvatar variant="light" background="solid" rounded label="+4" />
</TkAvatarGroup>

<tk-avatar-group>
  <tk-avatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <tk-avatar variant="light" background="solid" rounded label="+4" />
</tk-avatar-group>
<tk-avatar-group compact>
  <tk-avatar image="https://via.placeholder.com/40" variant="primary" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="light" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="success" background="solid" rounded />
  <tk-avatar image="https://via.placeholder.com/40" variant="info" background="solid" rounded label="TK" />
  <tk-avatar variant="light" background="solid" rounded label="+4" />
</tk-avatar-group>

API

Props

Type	Default	Description
`string`	null	ID of the element that labels the avatar - accessibility
`"brand", "solid"`	'brand'	Background style of the avatar
`boolean`	false	The badge to be displayed in the avatar
`"danger", "info", "success", "warning"`	'success'	The status of the badge
`string`	null	URL of the image to be displayed in the avatar
`string`	null	Text label to be displayed in the avatar
`string`	null	Name associated with the avatar - accessibility
`boolean`	false	Whether the avatar should have rounded corners
`"base", "large", "small", "xlarge", "xsmall"`	'base'	Size of the avatar
`"danger", "info", "light", "primary", "success", "warning"`	'primary'	Appearance of the avatar

Basic​

Sizes​

Variants​

Avatar with Images​

Avatar with Badges​

Avatar Group​

API​

Props​

Basic

Sizes

Variants

Avatar with Images

Avatar with Badges

Avatar Group

API

Props