Components

Avatar

A graphical representation of an object or entity

Selected Theme

Select brand or tribe name to preview style

Default

Usage

An avatar is a graphical representation of an object or entity, such as a person or organization.

import { Avatar } from 'legion-ui';

Variant

Legion have variant Basic and Additional badge

Basic

Default usage of Avatar and its behavior being lg in size, and accepts src prop to serve the image.

<Avatar />

Additional badge

You can provide an additional badge.

<div class="ruby">
  <div class="inherit mr-8">
    <Avatar size="lg" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
    <Badge size="lg" variant="online" bordered mt={-3} />
  </div>
  <div class="inherit">
    <Avatar size="md" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
    <Badge size="lg" variant="online" bordered mt={-3} />
  </div>

Attribute

Size

You can customise the size of the Avatar via the size prop, which accepts either small, medium, or large. By default size is large.

<Avatar size="lg" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
<Avatar size="md" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />
<Avatar size="sm" src="https://rickandmortyapi.com/api/character/avatar/192.jpeg" />

Props

property	propType	required	default	description
size	`sm` \| `md` \| `lg`	-	`lg`	Set the size of the avatar
style	object	-	-	The `style` prop lets you style elements inline

Do you have feedback?

Please let us know to make it better

Send Feedback