Avatar

Avatars are used to represent an individual, a business, or a celestial being when they interact with any Coingaming brand. While they usually consist of an image, avatars are adaptable - letters or object icons may sometimes be used as fallbacks.

Default

<Avatar />

Variants

<Avatar />
<Avatar name="JS" />
<Avatar image_url="https://www.fillmurray.com/200/200" />

Rounded

<Avatar is_rounded />
<Avatar is_rounded name="JS" />
<Avatar is_rounded image_url="https://www.fillmurray.com/200/200" />

Different colours

<Avatar />
<Avatar color="text-frieza" bg_color="bg-chichi" />
<Avatar color="text-gohan" bg_color="bg-krillin" />
<Avatar color="text-chichi" bg_color="bg-frieza" />

Sizes

2xl

<div class="flex flex-wrap items-center justify-around gap-2 w-full">
  <Avatar size="xs" />
  <Avatar size="sm" />
  <Avatar />
  <Avatar size="lg" />
  <Avatar size="xl" />
  <Avatar size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
  <Avatar name="xs" size="xs" />
  <Avatar name="sm" size="sm" />
  <Avatar name="md" />
  <Avatar name="lg" size="lg" />
  <Avatar name="xl" size="xl" />
  <Avatar name="2xl" size="2xl" />
</div>
<div class="flex flex-wrap items-center justify-around gap-2 w-full">
  <Avatar image_url="https://www.fillmurray.com/200/200" size="xs" />
  <Avatar image_url="https://www.fillmurray.com/200/200" size="sm" />
  <Avatar image_url="https://www.fillmurray.com/200/200" />
  <Avatar image_url="https://www.fillmurray.com/200/200" size="lg" />
  <Avatar image_url="https://www.fillmurray.com/200/200" size="xl" />
  <Avatar image_url="https://www.fillmurray.com/200/200" size="2xl" />
</div>

Active status

<Avatar />
<Avatar is_status_active />
<Avatar image_url="https://www.fillmurray.com/200/200" />
<Avatar image_url="https://www.fillmurray.com/200/200" is_status_active />

Status origin

<Avatar
  is_status_active
  status_origin={%StatusOrigin{ vertical: "top", horizontal: "right" }}
/>
<Avatar
  is_status_active
  status_origin={%StatusOrigin{ vertical: "top", horizontal: "left" }}
/>
<Avatar is_status_active />
<Avatar
  is_status_active
  status_origin={%StatusOrigin{ vertical: "bottom", horizontal: "left" }}
/>

Avatar props

Name	Type	Required	Default	Description
bg_color	string	No	bg-gohan	Background color
color	string	No	text-bulma	Text color
image_url	string	No	-	Path to the image
is_rounded	boolean	No	false
is_status_active	boolean	No	false	Active state for status indication
name	string	No	-	Capital letters of name
size	xs \| sm \| md \| lg \| xl \| 2xl	No	md	Size for avatar
status_origin	%StatusOrigin{ vertical: top \| bottom, horizontal: left \| right }	No	%StatusOrigin{vertical: "bottom", horizontal: "right"}	Position for status indication

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select