Skip to content

Avatar

An image element with a fallback for representing the user.

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

<template>
  <Avatar.Root>
    <Avatar.Fallback>EL</Avatar.Fallback>
    <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
  </Avatar.Root>
</template>

import { Avatar } from '@destyler-ui/react'

export function Basic(props: Avatar.RootProps) {
  return (
    <Avatar.Root {...props}>
      <Avatar.Fallback>EH</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

import { Avatar } from '@destyler-ui/solid/avatar'

export function Basic() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.Root>
  )
}

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
</script>

<Avatar.Root>
  <Avatar.Fallback>EL</Avatar.Fallback>
  <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
</Avatar.Root>

Anatomy

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

<template>
  <Avatar.Root>
    <Avatar.Fallback />
    <Avatar.Image />
  </Avatar.Root>
</template>

import { Avatar } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

import { Avatar } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
</script>

<Avatar.Root>
  <Avatar.Fallback>EL</Avatar.Fallback>
  <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
</Avatar.Root>

Examples

Basic

Display a user’s profile image with a fallback.

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

<template>
  <Avatar.Root>
    <Avatar.Fallback>EL</Avatar.Fallback>
    <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
  </Avatar.Root>
</template>

import { Avatar } from '@destyler-ui/react'

export function Basic(props: Avatar.RootProps) {
  return (
    <Avatar.Root {...props}>
      <Avatar.Fallback>EH</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

import { Avatar } from '@destyler-ui/solid/avatar'

export function Basic() {
  return (
    <Avatar.Root>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.Root>
  )
}

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
</script>

<Avatar.Root>
  <Avatar.Fallback>EL</Avatar.Fallback>
  <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
</Avatar.Root>

Closed Component

Wrap the avatar parts into a reusable component that derives initials from a name.

<script setup lang="ts">
import type { AvatarRootEmits, AvatarRootProps } from '@destyler-ui/vue'
import { Avatar, useForwardPropsEmits } from '@destyler-ui/vue'
import { computed } from 'vue'

export interface AvatarProps extends AvatarRootProps {
  src?: string
  name: string
}

const props = withDefaults(defineProps<AvatarProps>(), {
  name: 'Elone Hoo',
  src: 'https://github.com/elonehoo.png',
})
const emits = defineEmits<AvatarRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)

const getInitials = computed(() =>
  props.name
    .split(' ')
    .map((part) => part[0])
    .slice(0, 2)
    .join('')
    .toUpperCase(),
)
</script>

<template>
  <Avatar.Root v-bind="forwarded">
    <Avatar.Fallback>{{ getInitials }}</Avatar.Fallback>
    <Avatar.Image :src="props.src" :alt="props.name" />
  </Avatar.Root>
</template>

import { Avatar } from '@destyler-ui/react'

export interface CloseProps extends Avatar.RootProps {
  src?: string
  name: string
}

export function Close(props: CloseProps) {
  const { src = 'https://github.com/elonehoo.png', name = 'Elone Hoo', ...rootProps } = props

  const getInitials = name
    .split(' ')
    .map(part => part[0])
    .slice(0, 2)
    .join('')
    .toUpperCase()

  return (
    <Avatar.Root {...rootProps}>
      <Avatar.Fallback>{getInitials}</Avatar.Fallback>
      <Avatar.Image src={src} alt={name} />
    </Avatar.Root>
  )
}

import { createMemo, mergeProps, splitProps } from 'solid-js'
import { Avatar } from '@destyler-ui/solid'

export interface CloseProps extends Avatar.RootProps {
  name?: string
  src?: string
}

export function Close(props: CloseProps) {
  const mergedProps = mergeProps(
    { src: 'https://github.com/elonehoo.png', name: 'Elone Hoo' },
    props,
  )
  const [localProps, rootProps] = splitProps(mergedProps, ['name', 'src'])
  const initials = createMemo(() =>
    localProps.name
      .split(' ')
      .map(part => part[0])
      .slice(0, 2)
      .join('')
      .toUpperCase(),
  )

  return (
    <Avatar.Root {...rootProps}>
      <Avatar.Fallback>{initials()}</Avatar.Fallback>
      <Avatar.Image src={localProps.src} alt={localProps.name} />
    </Avatar.Root>
  )
}

<script module lang="ts">
  import type { AvatarRootProps } from '@destyler-ui/svelte'
  export interface Props extends AvatarRootProps { src?: string; name?: string }
</script>

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
  let { src = 'https://github.com/elonehoo.png', name = 'Elone Hoo', ...props }: Props = $props()
  const initials = $derived(name.split(' ').map(part => part[0]).slice(0, 2).join('').toUpperCase())
</script>

<Avatar.Root {...props}>
  <Avatar.Fallback>{initials}</Avatar.Fallback>
  <Avatar.Image {src} alt={name} />
</Avatar.Root>

Context

Access the avatar loading state with Avatar.Context.

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

<template>
  <Avatar.Root>
    <Avatar.Context v-slot="avatar">
      <Avatar.Fallback>
        {{ avatar.loaded ? 'EL' : 'Loading' }}
      </Avatar.Fallback>
    </Avatar.Context>
    <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
  </Avatar.Root>
</template>

import { Avatar } from '@destyler-ui/react'

export function Context() {
  return (
    <Avatar.Root>
      <Avatar.Context>
        {avatar => (
          <Avatar.Fallback>
            {avatar.loaded ? 'EL' : 'Loading'}
          </Avatar.Fallback>
        )}
      </Avatar.Context>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

import { Avatar } from '@destyler-ui/solid/avatar'

export function Context() {
  return (
    <Avatar.Root>
      <Avatar.Context>
        {avatar => <Avatar.Fallback>{avatar().loaded ? 'PA' : 'Loading'}</Avatar.Fallback>}
      </Avatar.Context>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.Root>
  )
}

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
</script>

<Avatar.Root>
  <Avatar.Context>
    {#snippet api(avatar)}
      <Avatar.Fallback>{avatar().loaded ? 'EL' : 'Loading'}</Avatar.Fallback>
    {/snippet}
  </Avatar.Context>
  <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
</Avatar.Root>

Events

Use onStatusChange to listen for loading state changes.

<script setup lang="ts">
import { Avatar } from '@destyler-ui/vue'
import { ref } from 'vue'

const status = ref('loading...')
</script>

<template>
  <div class="stack">
    <output>Status: {{ status }}</output>
    <Avatar.Root @status-change="(e) => status = e.status">
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  </div>
</template>

import { Avatar } from '@destyler-ui/react'

export function Event() {
  return (
    // eslint-disable-next-line no-console
    <Avatar.Root onStatusChange={e => console.log(e.status)}>
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

import { Avatar } from '@destyler-ui/solid'

export function Event() {
  return (
    // eslint-disable-next-line no-console
    <Avatar.Root onStatusChange={event => console.log(event.status)}>
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
    </Avatar.Root>
  )
}

<script lang="ts">
  import { Avatar } from '@destyler-ui/svelte'
  let { src = 'https://github.com/elonehoo.png' }: { src?: string } = $props()
  let status = $state('loading...')
</script>

<div class="stack">
  <output>Status: {status}</output>
  <Avatar.Root onStatusChange={(event) => status = event.status}>
    <Avatar.Fallback>EL</Avatar.Fallback>
    <Avatar.Image {src} alt="avatar" />
  </Avatar.Root>
</div>

Root Provider

<script setup lang="ts">
import { ref } from 'vue';
import { Avatar, useAvatar } from '@destyler-ui/vue'

const avatar = useAvatar()

const count = ref(0)
</script>

<template>
  <div class="stack">
    <button @click="count++">Change Source</button>

    <Avatar.RootProvider :value="avatar">
      <Avatar.Fallback>EL</Avatar.Fallback>
      <Avatar.Image :src="`https://cover.sli.dev?u=${count}`"  alt="avatar" />
    </Avatar.RootProvider>
  </div>
</template>

import { Avatar, useAvatar } from '@destyler-ui/react'

export function RootProvider() {
  const avatar = useAvatar()

  return (
    <>
      <button onClick={() => avatar.setSrc('https://new-source.com')}>Change Source</button>

      <Avatar.RootProvider value={avatar}>
        <Avatar.Fallback>EL</Avatar.Fallback>
        <Avatar.Image src="https://github.com/elonehoo.png" alt="avatar" />
      </Avatar.RootProvider>
    </>
  )
}

import { Avatar, useAvatar } from '@destyler-ui/solid/avatar'

export function RootProvider() {
  const avatar = useAvatar()

  return (
    <>
      <button onClick={() => avatar().setSrc('https://new-source.com')}>Change Source</button>

      <Avatar.RootProvider value={avatar}>
        <Avatar.Fallback>PA</Avatar.Fallback>
        <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
      </Avatar.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Avatar, useAvatar } from '@destyler-ui/svelte'
  const id = $props.id()
  const avatar = useAvatar({ id })
  let count = $state(0)
</script>

<div class="stack">
  <button type="button" onclick={() => count++}>Change Source</button>
  <Avatar.RootProvider value={avatar}>
    <Avatar.Fallback>EL</Avatar.Fallback>
    <Avatar.Image src={`https://cover.sli.dev?u=${count}`} alt="avatar" />
  </Avatar.RootProvider>
</div>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; image: string; fallback: string; }>` The ids of the elements in the avatar. Useful for composition.

Emit	Event
`statusChange`	`[details: StatusChangeDetails]` Functional called when the image loading status changes.

Context

No serializable props or emits are declared for this part.

Fallback

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Image

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; image: string; fallback: string; }>` The ids of the elements in the avatar. Useful for composition.
`onStatusChange`	—	`(details: StatusChangeDetails) => void` Functional called when the image loading status changes.

Context

Prop	Default	Type
`children*`	—	`(context: UseAvatarContext) => ReactNode`

Fallback

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Image

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseAvatarReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js99.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; image: string; fallback: string; }>` The ids of the elements in the avatar. Useful for composition.
`onStatusChange`	—	`(details: StatusChangeDetails) => void` Functional called when the image loading status changes.

Context

Prop	Default	Type
`children*`	—	`(context: UseAvatarContext) => Element`

Fallback

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js99.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Image

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js99.JSX.ImgHTMLAttributes<HTMLImageElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseAvatarReturn`
`asChild`	—	`(props: (userProps?: solid_js99.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`id`	—	`string`
`ids`	—	`Partial<{ root: string; image: string; fallback: string; }>` The ids of the elements in the avatar. Useful for composition.
`onStatusChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").AvatarStatusChangeDetails) => void` Functional called when the image loading status changes.

Context

Prop	Default	Type
`api`	—	`Snippet<[UseAvatarContext]>`

Fallback

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

Image

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"img">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseAvatarReturn`