Avatar

An Avatar container to show user photo or initials.

The Avatar component can be used on User Cards or User Menus to display some basic info about a user.

DA
import { Badge } from '@rewind-ui/core';

function App() {
  return (
    <Avatar color="purple" size="xl" status="online" tone="glossy" initials="DA" />
  );
}

Import


Import the Avatar component using the following import statement.

import { Avatar } from '@rewind-ui/core';

Tones & Colors


The Avatar component comes with four tones: solid, light, glossy and outline.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.

Solid

ND
ND
ND
ND
ND
ND
ND
ND
ND
<View>
  <Avatar color="white" initials="ND" />
  <Avatar color="blue" initials="ND" />
  <Avatar color="red" initials="ND" />
  <Avatar color="green" initials="ND" />
  <Avatar color="yellow" initials="ND" />
  <Avatar color="purple" initials="ND" />
  <Avatar color="gray" initials="ND" />
  <Avatar color="dark" initials="ND" />
  <Avatar color="black" initials="ND" />
</View>

Light

ND
ND
ND
ND
ND
ND
ND
ND
ND
<View>
  <Avatar tone="light" color="white" initials="ND" />
  <Avatar tone="light" color="blue" initials="ND" />
  <Avatar tone="light" color="red" initials="ND" />
  <Avatar tone="light" color="green" initials="ND" />
  <Avatar tone="light" color="yellow" initials="ND" />
  <Avatar tone="light" color="purple" initials="ND" />
  <Avatar tone="light" color="gray" initials="ND" />
  <Avatar tone="light" color="dark" initials="ND" />
  <Avatar tone="light" color="black" initials="ND" />
</View>

Glossy

ND
ND
ND
ND
ND
ND
ND
ND
ND
<View>
  <Avatar tone="glossy" color="white" initials="ND" />
  <Avatar tone="glossy" color="blue" initials="ND" />
  <Avatar tone="glossy" color="red" initials="ND" />
  <Avatar tone="glossy" color="green" initials="ND" />
  <Avatar tone="glossy" color="yellow" initials="ND" />
  <Avatar tone="glossy" color="purple" initials="ND" />
  <Avatar tone="glossy" color="gray" initials="ND" />
  <Avatar tone="glossy" color="dark" initials="ND" />
  <Avatar tone="glossy" color="black" initials="ND" />
</View>

Outline

ND
ND
ND
ND
ND
ND
ND
ND
ND
<View>
  <Avatar tone="outline" color="white" initials="ND" />
  <Avatar tone="outline" color="blue" initials="ND" />
  <Avatar tone="outline" color="red" initials="ND" />
  <Avatar tone="outline" color="green" initials="ND" />
  <Avatar tone="outline" color="yellow" initials="ND" />
  <Avatar tone="outline" color="purple" initials="ND" />
  <Avatar tone="outline" color="gray" initials="ND" />
  <Avatar tone="outline" color="dark" initials="ND" />
  <Avatar tone="outline" color="black" initials="ND" />
</View>

Sizes


Available size values are: xs, sm, md, lg and xl.

ND
ND
ND
ND
ND
<View>
  <Avatar size="xs" initials="ND" />
  <Avatar size="sm" initials="ND" />
  <Avatar size="md" initials="ND" />
  <Avatar size="lg" initials="ND" />
  <Avatar size="xl" initials="ND" />
</View>

Radiuses


Available radius values are: none, sm, base, md, lg and full.

ND
ND
ND
ND
ND
ND
<View>
  <Avatar radius="none" initials="ND" />
  <Avatar radius="sm" initials="ND" />
  <Avatar radius="base" initials="ND" />
  <Avatar radius="md" initials="ND" />
  <Avatar radius="lg" initials="ND" />
  <Avatar radius="full" initials="ND" />
</View>

Shadows


Available shadow values are: none, sm, base, md, lg and xl.

ND
ND
ND
ND
ND
ND
<View>
  <Avatar shadow="none" initials="ND" />
  <Avatar shadow="sm" initials="ND" />
  <Avatar shadow="base" initials="ND" />
  <Avatar shadow="md" initials="ND" />
  <Avatar shadow="lg" initials="ND" />
  <Avatar shadow="xl" initials="ND" />
</View>

Shadow colors

Available shadowColor values are: blue, red, green, yellow, purple, gray, dark and black.

ND
ND
ND
ND
ND
ND
ND
ND
<View>
  <Avatar shadow="lg" color="blue" shadowColor="blue" initials="ND" />
  <Avatar shadow="lg" color="red" shadowColor="red" initials="ND" />
  <Avatar shadow="lg" color="green" shadowColor="green" initials="ND" />
  <Avatar shadow="lg" color="yellow" shadowColor="yellow" initials="ND" />
  <Avatar shadow="lg" color="purple" shadowColor="purple" initials="ND" />
  <Avatar shadow="lg" color="gray" shadowColor="gray" initials="ND" />
  <Avatar shadow="lg" color="dark" shadowColor="dark" initials="ND" />
  <Avatar shadow="lg" color="black" shadowColor="black" initials="ND" />
</View>

Status


Available status values are: online, offline, busy, away and none.

ND
ND
ND
ND
ND
<View>
  <Avatar status="online" initials="ND" />
  <Avatar status="offline" initials="ND" />
  <Avatar status="busy" initials="ND" />
  <Avatar status="away" initials="ND" />
  <Avatar status="none" initials="ND" />
</View>

Status position

Available statusPosition values are: top-left, top-right, bottom-left and bottom-right.

ND
ND
ND
ND
<View>
  <Avatar status="online" statusPosition="top-left" initials="ND" />
  <Avatar status="online" statusPosition="top-right" initials="ND" />
  <Avatar status="online" statusPosition="bottom-left" initials="ND" />
  <Avatar status="online" statusPosition="bottom-right" initials="ND" />
</View>

Image


An image can be displayed by passing a url to the src prop.

Dan Abramov
<View>
  <Avatar
    src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
    initials="DA"
    alt="Dan Abramov"
    size="xl"
    status="online"
  />
</View>

Group


The Avatar.Group component can be used to display a group of avatars.

ND
ND
ND
ND
<View>
  <Avatar.Group>
    <Avatar
      src="https://avatars.githubusercontent.com/u/4800338?s=96&v=4"
      initials="ND"
      size="xl"
    />
    <Avatar
      src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
      initials="ND"
      size="xl"
    />
    <Avatar
      src="https://avatars.githubusercontent.com/u/3624098?s=96&v=4"
      initials="ND"
      size="xl"
    />
    <Avatar
      src="https://avatars.githubusercontent.com/u/1365881?s=96&v=4"
      initials="ND"
      size="xl"
    />
  </Avatar.Group>
</View>

Examples


User Card

Dan Abramov
Dan Abramov
@facebook
<View>
  <Card radius="lg">
    <Card.Body className="flex space-x-3 p-2">
      <Avatar
        src="https://avatars.githubusercontent.com/u/810438?s=96&v=4"
        initials="DA"
        alt="Dan Abramov"
        status="online"
      />
      <div className="flex flex-col">
        <div className="font-medium text-gray-700 text-base">Dan Abramov</div>
        <div className="text-gray-400 text-sm">@facebook</div>
      </div>
    </Card.Body>
  </Card>
</View>

API Reference


Properties

PropTypeDescriptionDefault
altstringImage alt textundefined
colorAvatarColorSets the colorgray
initialsstringInitialsundefined
outlinedbooleanAdds outlinetrue
radiusAvatarRadiusSets the border radiusfull
shadowAvatarShadowSets the shadow sizenone
shadowColorAvatarShadowColorSets the shadow colornone
sizeAvatarSizeSets the badge sizelg
srcstringImage urlundefined
statusAvatarStatusAdds a status badgenone
statusPositionAvatarStatusPositionSets the status badge positionbottom-right
toneAvatarToneSets the badge tonesolid

Types

type AvatarColor =
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type AvatarRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type AvatarShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
type AvatarShadowColor =
  | 'none'
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type AvatarStatus = 'none' | 'online' | 'offline' | 'busy' | 'away';
type AvatarStatusPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
type AvatarTone = 'solid' | 'light' | 'glossy' | 'outline';