Menu
Documentation
v4.0.0-beta.4

Avatar

<BaseAvatar /> · A profile picture, or initials as a fallback text.

View SourceOpen Issue
?L
vue
<template>
  <BaseAvatar src="/img/people/29.jpg" />
  <BaseAvatar text="L" class="bg-muted-200 dark:bg-muted-800" />
</template>

Features

  • Control over image render
  • Fallback accepts any children
  • Built-in badges and masks

Anatomy

This component accepts images and fallback text as props or children. It also has built-in badges and masks, as well as useful utilities to control size and border radius.

vue
<template>
  <BaseAvatar>
    <!-- Image or fallback here -->
  </BaseAvatar>
</template>

API Reference

This component has props and slots. The slots are used to customize the content of the component.

Prop Type
src
default:-
string

The URL of the image to display.

src-dark
default:-
string

The URL of a dark version of the image to display when the component is in dark mode.

badge-src
default:-
string

The URL of a badge to display on top of the image.

alt
default:-
string

The alt text of the image.

text
default:"?"
string

The text to display below the image.

size
default:"sm"
"sm" | "xxs" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"

The size of the image.

rounded
default:"full"
"sm" | "full" | "md" | "lg" | "none"

The radius of the image.

mask
default:-
"hex" | "hexed" | "deca" | "blob" | "diamond"

Applies an svg mask from the available presets. (needs rounded to be set to `none`).

bindings
default:{}
{ image?: AvatarImageProps; dark?: AvatarImageProps; fallback?: AvatarFallbackProps; }

Optional bindings to pass to the inner components.

classes
default:{}
{ root?: string | string[]; image?: string | string[]; dark?: string | string[]; fallback?: string | string[]; badge?: string | string[]; }

Optional classes to pass to the inner components.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any
#badge
any

Examples

Size

Use the size prop to control the size of the avatar.

???????
vue
<template>
  <BaseAvatar src="/img/avatars/10.svg" size="lg" />
</template>

Fallback

Use the text prop to add a fallback text to the avatar. Use tailwind classes to style the container and the text.

ZLHKET
vue
<template>
  <BaseAvatar size="md" text="L" class="bg-primary-500/20 text-primary-600" />
</template>

Radius

Use the rounded prop to control the avatar border radius.

?????
vue
<template>
  <BaseAvatar src="/img/avatars/16.svg" rounded="none" />
  <BaseAvatar src="/img/avatars/10.svg" rounded="sm" />
  <BaseAvatar src="/img/avatars/25.svg" rounded="md" />
  <BaseAvatar src="/img/avatars/24.svg" rounded="lg" />
  <BaseAvatar src="/img/avatars/15.svg" rounded="full" />
</template>

Badge

Use the badge-src prop to add a badge to the avatar.

?
?
?
?
?
vue
<template>
  <BaseAvatar
    src="/img/people/29.svg"
    size="md"
    badge-src="/img/vector/stacks/js.svg"
  />
</template>

Chip

Wrap the avatar component with a Chip component to add a status indicator. Use the chip props to control the indicator color and position.

?
?
?
?
?
vue
<template>
  <BaseChip
    placement="top-end"
    :offset="4"
    color="custom"
    class="text-sky-400"
  >
    <BaseAvatar
      src="/img/people/43.jpg"
      rounded="full"
      size="md"
      dot="pink"
    />
  </BaseChip>
</template>

Mask

Use the mask prop combined with the none radius to add an svg mask to the avatar.

?????
vue
<template>
  <BaseAvatar src="/img/avatars/2.svg" rounded="none" mask="hex" />
  <BaseAvatar src="/img/avatars/10.svg" rounded="none" mask="hexed" />
  <BaseAvatar src="/img/avatars/25.svg" rounded="none" mask="blob" />
  <BaseAvatar src="/img/avatars/24.svg" rounded="none" mask="deca" />
  <BaseAvatar src="/img/avatars/15.svg" rounded="none" mask="diamond" />
</template>

Slot

Use the default slot to insert a custom image into the avatar.

vue
<template>
  <BaseAvatar
    size="md"
    rounded="full"
  >
    <NuxtImg
      loading="lazy"
      decoding="async"
      src="/img/people/44.jpg"
      class="rounded-full"
      alt=""
    />
  </BaseAvatar>
</template>

Autocomplete

Avatar Group