juxt.ui

Display

Avatar

A person or entity, as an image with graceful fallbacks and an optional presence dot.

Copy
<template>
  <JAvatar src="/avatars/1.svg" name="Mara Quinn" size="lg" />
  <JAvatar name="Ada Lovelace" size="lg" />
  <JAvatar size="lg" />
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JAvatar } from '@juxtui/ui'

Usage #

Copy
<JAvatar src="/ada.jpg" name="Ada Lovelace" status="online" />

The image fades in once it has loaded. Until then — or if it fails — initials from name are shown, then a neutral glyph.

The status ring takes the colour of the surface behind it. Inside a JCard it adapts automatically; elsewhere set --j-avatar-ring.

Variants & examples #

Sizes and shapes#

Copy
<template>
  <JAvatar src="/avatars/2.svg" name="Theo Park" size="xs" />
  <JAvatar src="/avatars/2.svg" name="Theo Park" size="sm" />
  <JAvatar src="/avatars/2.svg" name="Theo Park" size="md" />
  <JAvatar src="/avatars/2.svg" name="Theo Park" size="lg" />
  <JAvatar src="/avatars/2.svg" name="Theo Park" size="xl" />
  <JAvatar name="juxt.ui Labs" shape="square" size="xl" />
</template>

Status#

Copy
<template>
  <JAvatar src="/avatars/1.svg" name="Mara Quinn" status="online" size="lg" />
  <JAvatar src="/avatars/2.svg" name="Theo Park" status="away" size="lg" />
  <JAvatar src="/avatars/3.svg" name="Iris Chen" status="busy" size="lg" />
  <JAvatar name="Sam Okafor" status="offline" size="lg" />
</template>

Stacked#

+12 others
Copy
<template>
  <div class="flex items-center">
    <div class="flex -space-x-2 *:rounded-full *:ring-2 *:ring-bg">
      <JAvatar src="/avatars/1.svg" name="Mara Quinn" />
      <JAvatar src="/avatars/2.svg" name="Theo Park" />
      <JAvatar src="/avatars/3.svg" name="Iris Chen" />
      <JAvatar name="Sam Okafor" />
    </div>
    <span class="ml-3 text-sm text-fg-muted">+12 others</span>
  </div>
</template>

API #

Props

PropTypeDefault Description
srcstring—Image URL.
namestring—Full name — used for initials and the accessible name.
altstring—Accessible name override. Defaults to name.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'20, 24, 32, 40 or 56px.
shape'circle' | 'square''circle'Square suits teams and organisations.
status'online' | 'away' | 'busy' | 'offline'—Presence dot.

Slots

SlotProps Description
fallback—Custom fallback content.

Accessibility #

  • Exposed as role="img" with the name — and status, when set — as its label, e.g. “Ada Lovelace (Online)”.
  • Without a name the avatar is decorative.