---
sidebar_position: 2
---

import { Avatar, Badge } from "rizzui";
import Paper from "@site/src/components/paper";

# Avatar

Avatar is a small UI item which represents user profile picture, or event that appears in relativity with the underlying object.

```tsx
import { Avatar } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Avatar**.

<Paper>
  <Avatar
    name="Jane Doe"
    src="https://randomuser.me/api/portraits/women/40.jpg"
  />
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <Avatar
      name="Jane Doe"
      src="https://randomuser.me/api/portraits/women/40.jpg"
    />
  );
}
```

<div className="mb-16" />

## Variants

You can add text or avatar icon to **Avatar** component using **initials** or **src** property.

<Paper>
  <div className="flex items-center gap-3 justify-around w-full">
    <Avatar name="John Doe" />
    <Avatar
      src="https://randomuser.me/api/portraits/women/40.jpg"
      name="John Doe"
    />
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        name="John Doe"
        initials="AB"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/40.jpg"
        name="John Doe"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of the **Avatar** using **size** property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Avatar
      name="John Doe"
      initials="SM"
      size="sm"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/men/40.jpg"
      name="John Doe"
    />
    <Avatar
      name="John Doe"
      initials="L"
      size="lg"
    />
    <Avatar
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/40.jpg"
      size="xl"
    />
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        name="John Doe"
        initials="SM"
        size="sm"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/men/40.jpg"
        name="John Doe"
      />
      <Avatar
        name="John Doe"
        initials="L"
        size="lg"
      />
      <Avatar
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/40.jpg"
        size="xl"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of the **Avatar** using [**rounded**](#avatar-rounded) property.

<Paper>
  <div className="mt-4 flex items-center justify-around gap-3 w-full flex-wrap">
    <Avatar
      src="https://randomuser.me/api/portraits/women/40.jpg"
      name="John Doe"
      rounded="none"
    />
    <Avatar
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/41.jpg"
      rounded="sm"
    />
    <Avatar
      rounded="md"
      src="https://randomuser.me/api/portraits/women/42.jpg"
      name="John Doe"
    />
    <Avatar
      rounded="lg"
      src="https://randomuser.me/api/portraits/women/43.jpg"
      name="John Doe"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/44.jpg"
      name="John Doe"
    />
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        src="https://randomuser.me/api/portraits/women/40.jpg"
        name="John Doe"
        rounded="none"
      />
      <Avatar
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/41.jpg"
        rounded="sm"
      />
      <Avatar
        rounded="md"
        src="https://randomuser.me/api/portraits/women/42.jpg"
        name="John Doe"
      />
      <Avatar
        rounded="lg"
        src="https://randomuser.me/api/portraits/women/43.jpg"
        name="John Doe"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/44.jpg"
        name="John Doe"
      />
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of the **Avatar** using **color** property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Avatar
      name="John Doe"
      initials="SM"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="primary"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="secondary"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="danger"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="warning"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="success"
    />
    <Avatar
      name="John Doe"
      initials="SM"
      color="info"
    />
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        name="John Doe"
        initials="SM"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="primary"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="secondary"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="danger"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="warning"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="success"
      />
      <Avatar
        name="John Doe"
        initials="SM"
        color="info"
      />
    </>
  );
}
```

<div className="mb-16" />

## Borders

You can add border to **Avatar** by adding extra className using **className** property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Avatar
      src="https://randomuser.me/api/portraits/women/41.jpg"
      name="John Doe"
      className="ring-2 ring-primary ring-offset-background ring-offset-2"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/42.jpg"
      name="John Doe"
      className="ring-2 ring-secondary ring-offset-background ring-offset-2"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/43.jpg"
      size="lg"
      name="John Doe"
      className="ring-2 ring-red  ring-offset-background ring-offset-2"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/44.jpg"
      name="John Doe"
      className="ring-2 ring-orange ring-offset-background ring-offset-2"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/45.jpg"
      name="John Doe"
      className="ring-2 ring-green ring-offset-background ring-offset-2"
    />
    <Avatar
      src="https://randomuser.me/api/portraits/women/46.jpg"
      name="John Doe"
      className="ring-2 ring-blue ring-offset-background ring-offset-2"
    />
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        src="https://randomuser.me/api/portraits/women/41.jpg"
        name="John Doe"
        className="ring-2 ring-primary ring-offset-background ring-offset-2"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/42.jpg"
        name="John Doe"
        className="ring-2 ring-secondary ring-offset-background ring-offset-2"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/43.jpg"
        name="John Doe"
        className="ring-2 ring-red ring-offset-background ring-offset-2"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/44.jpg"
        name="John Doe"
        className="ring-2 ring-orange ring-offset-background ring-offset-2"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/45.jpg"
        name="John Doe"
        className="ring-2 ring-green ring-offset-background ring-offset-2"
      />
      <Avatar
        src="https://randomuser.me/api/portraits/women/46.jpg"
        name="John Doe"
        className="ring-2 ring-blue ring-offset-background ring-offset-2"
      />
    </>
  );
}
```

<div className="mb-16" />

## Online Status

You can use **Badge** with **Avatar** component for online status.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <div className="relative inline-flex">
      <Avatar
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/40.jpg"
      />
      <Badge
        renderAsDot
        color="success"
        enableOutlineRing
        size="lg"
        className="absolute right-0 top-0 -translate-y-[25%]"
      />
    </div>
    <div className="relative ml-3 inline-flex">
      <Avatar
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/43.jpg"
      />
      <Badge
        renderAsDot
        color="danger"
        enableOutlineRing
        size="lg"
        className="absolute right-0 top-0 -translate-y-[25%]"
      />
    </div>
    <div className="relative ml-3 inline-flex">
      <Avatar
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/44.jpg"
      />
      <Badge
        renderAsDot
        color="warning"
        enableOutlineRing
        size="lg"
        className="absolute right-0 top-0 -translate-y-[30%]"
      />
    </div>
  </div>
</Paper>

```tsx
import { Avatar, Badge } from "rizzui";

export default function App() {
  return (
    <>
      <div className="relative inline-flex">
        <Avatar
          size="lg"
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/40.jpg"
        />
        <Badge
          renderAsDot
          color="success"
          enableOutlineRing
          size="lg"
          className="absolute right-0 top-0 -translate-y-[25%]"
        />
      </div>
      <div className="relative ml-3 inline-flex">
        <Avatar
          size="lg"
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/43.jpg"
        />
        <Badge
          renderAsDot
          color="danger"
          enableOutlineRing
          size="lg"
          className="absolute right-0 top-0 -translate-y-[25%]"
        />
      </div>
      <div className="relative ml-3 inline-flex">
        <Avatar
          size="lg"
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/44.jpg"
        />
        <Badge
          renderAsDot
          color="warning"
          enableOutlineRing
          size="lg"
          className="absolute right-0 top-0 -translate-y-[30%]"
        />
      </div>
    </>
  );
}
```

<div className="mb-16" />

## Group

You can use **Avatar** component to create a group of avatars.

<Paper>
  <div className="relative my-4 flex">
    <Avatar
      customSize="42"
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/40.jpg"
      className="relative inline-flex  object-cover"
    />
    <Avatar
      customSize="42"
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/41.jpg"
      className="relative inline-flex -translate-x-[5px] object-cover ring-2 ring-background"
    />
    <Avatar
      customSize="42"
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/42.jpg"
      className="relative inline-flex -translate-x-[10px] object-cover ring-2 ring-background"
    />
    <Avatar
      customSize="42"
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/43.jpg"
      className="relative inline-flex -translate-x-[15px] object-cover ring-2 ring-background"
    />
    <Avatar
      customSize="42"
      name="John Doe"
      src="https://randomuser.me/api/portraits/women/44.jpg"
      className="relative inline-flex -translate-x-[20px] object-cover ring-2 ring-background"
    />
    <div className="bordered relative inline-flex h-[42px] w-[42px] -translate-x-[25px] items-center justify-center rounded-full object-cover text-sm font-medium text-gray-900">
      +5
    </div>
  </div>
</Paper>

```tsx
import { Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <Avatar
        customSize="42"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/40.jpg"
        className="relative inline-flex  object-cover"
      />
      <Avatar
        customSize="42"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/41.jpg"
        className="relative inline-flex -translate-x-[5px] object-cover ring-2 ring-background"
      />
      <Avatar
        customSize="42"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/42.jpg"
        className="relative inline-flex -translate-x-[10px] object-cover ring-2 ring-background"
      />
      <Avatar
        customSize="42"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/43.jpg"
        className="relative inline-flex -translate-x-[15px] object-cover ring-2 ring-background"
      />
      <Avatar
        customSize="42"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/44.jpg"
        className="relative inline-flex -translate-x-[20px] object-cover ring-2 ring-background"
      />
      <div className="bordered relative inline-flex h-[42px] w-[42px] -translate-x-[25px] items-center justify-center rounded-full object-cover text-sm font-medium text-gray-900">
        +5
      </div>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Avatar Props

Here is the API documentation of the Avatar component.

<div className="overflow-x-auto">

|   Props    |               Type               |                                       Description                                        | Default  |
| :--------: | :------------------------------: | :--------------------------------------------------------------------------------------: | :------: |
|    name    |             `string`             | Will be used to generate avatar initials based on the person name when image is missing  |   \_\_   |
|  initials  |             `string`             |                        Display custom text when image is missing                         |   \_\_   |
|    src     |             `string`             |                              Image soruce (local or remote)                              |   \_\_   |
|   color    |  [AvatarColors](#avatar-colors)  |         Modify avatar color; by default, avatars have randomly generated colors.         |   \_\_   |
|    size    |             `string`             |                                    Size of the avatar                                    |   \_\_   |
| customSize |             `string`             |                  customSize of the avatar, example -> customSize="62px"                  |   \_\_   |
|  rounded   | [AvatarRounded](#avatar-rounded) |                                    Set border radius                                     | `"full"` |
|  onClick   | [AvatarOnclick](#avatar-onclick) |                                    Mouse click event                                     |   \_\_   |
| className  |             `string`             | Name of the CSS class you want to add to this component alongside the default sb-avatar. |   \_\_   |

</div>

<div className="mb-10" />

### Avatar Colors

```ts
type AvatarColors = "primary" | "secondary" | "danger" | "info" | "success" | "warning";
```

<div className="mb-10" />

### Avatar Rounded

```ts
type AvatarRounded = "sm" | "md" | "lg" | "full" | "none";
```

<div className="mb-10" />

### Avatar onClick

```ts
type AvatarOnclick = (e: SyntheticEvent<any, Event>) => any;
```
