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.

Source code

Theme

Storybook

Tone

Color

Outlined

Size

Shadow

Shadow Color

Radius

Status

Status Position

With image

import { Badge } from '@almond-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 '@almond-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

<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

<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

<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

<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.

<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.

<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.

<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.

<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.

<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.

<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.

When using the src prop do not forget to add the initials prop. If the image fails to load the initials will be shown as a fallback strategy.

<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.

<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

@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

Prop	Type	Description	Default
alt	`string`	Image alt text	`undefined`
color	`AvatarColor`	Sets the color	`gray`
initials	`string`	Initials	`undefined`
outlined	`boolean`	Adds outline	`true`
radius	`AvatarRadius`	Sets the border radius	`full`
shadow	`AvatarShadow`	Sets the shadow size	`none`
shadowColor	`AvatarShadowColor`	Sets the shadow color	`none`
size	`AvatarSize`	Sets the badge size	`lg`
src	`string`	Image url	`undefined`
status	`AvatarStatus`	Adds a status badge	`none`
statusPosition	`AvatarStatusPosition`	Sets the status badge position	`bottom-right`
tone	`AvatarTone`	Sets the badge tone	`solid`

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';

Alert Badge