Avatar

An image element with a fallback for representing the user.
stableView sourceRadix ThemesReka UI
AlexAAliceAAliceA
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Avatar
      src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
      alt="Alex"
    />
    <Avatar
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
      alt="Alice"
    />
    <Avatar alt="Alice" />
  </div>
</template>

API Reference ​

PropDefaultType
alt
–
string

Alt text of the avatar, usually the person's name.

color
–
Color

Overrides the accent color inherited from the Theme.

fallback
–
string

Using fallback characters for the avatar.

radius"small"
"none""small""medium""large""full"

Overrides the radius inherited from the theme.

size"2"
Enum

Control the size of the avatar.

src
–
string

Avatar's image source URL.

variant"solid"
Enum

The visual variant to apply.

Examples ​

Size ​

AlexAAlexAAlexAAlexAAlexAAlexAAlexAAlexAAlexA
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'

const picture = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-1">
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="1"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="2"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="3"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="4"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="5"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="6"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="7"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="8"
      />
      <Avatar
        :src="picture"
        alt="Alex"
        radius="full"
        size="9"
      />
    </div>
  </div>
</template>

Radius ​

AlexAAlexAAlexAAlexA
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'

const picture = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Avatar
      :src="picture"
      alt="Alex"
      radius="none"
    />
    <Avatar
      :src="picture"
      alt="Alex"
      radius="small"
    />
    <Avatar
      :src="picture"
      alt="Alex"
      radius="medium"
    />
    <Avatar
      :src="picture"
      alt="Alex"
      radius="full"
    />
  </div>
</template>

Fallback ​

Harry PotterHPHP
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <Avatar
      src="https://bit.ly/broken-link"
      radius="full"
      alt="Harry Potter"
    />
    <Avatar
      src="https://bit.ly/broken-link"
      variant="soft"
      radius="full"
      fallback="HP"
    />
    <Avatar
      src="https://bit.ly/broken-link"
      radius="full"
      variant="soft"
    />
  </div>
</template>

Variant ​

HPHPHPHP
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-wrap items-center gap-4">
      <Avatar
        fallback="HP"
        radius="full"
        size="3"
        variant="solid"
      />
      <Avatar
        fallback="HP"
        radius="full"
        size="3"
        variant="surface"
      />
      <Avatar
        fallback="HP"
        radius="full"
        size="3"
        variant="soft"
      />
      <Avatar
        fallback="HP"
        radius="full"
        size="3"
        variant="outline"
      />
    </div>
  </div>
</template>

Ring ​

AlexAAlexAAlexA
vue
<script setup lang="ts">
import { Avatar } from '@typlog/ui'

const picture = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Avatar
      :src="picture"
      alt="Alex"
      radius="full"
      color="indigo"
      variant="ring"
    />
    <Avatar
      :src="picture"
      alt="Alex"
      radius="full"
      color="jade"
      variant="ring"
    />
    <Avatar
      :src="picture"
      alt="Alex"
      radius="full"
      color="crimson"
      variant="ring"
    />
  </div>
</template>