Avatar

Image with initials fallback

A square plate, like everything else — a circle would be the one shape here that can't lean (the rule). lean makes it lean on attention like a plate — when it is hovered or focused itself, or when the link or button it sits in is; the image inside is counter-skewed so the face stays upright. color is surface (default) or text; accent marks a chosen person, like the selected assignee, never one at rest.

Initials are the first letter of the first two words of name (Megumi Kato → MK, 加藤 恵 → 加恵). They show when there is no src, or when the image fails to load — including a failure that happens before the page hydrates. Without an image the avatar is role="img" named by alt or name; with neither it is decorative. Sizes: xs 24 · sm 32 · md 40 · lg 56 · xl 80 px.

Basic

MKMKMKMKMK

UK

<script setup lang="ts">
import { BlessAvatar } from "blessing-ui";
import { shots } from "./_data";
const sizes = ["xs", "sm", "md", "lg", "xl"] as const;
</script>

<template>
  <div class="row">
    <BlessAvatar v-for="s in sizes" :key="s" :size="s" name="Megumi Kato" />
  </div>
  <div class="row" style="margin-top: 12px">
    <BlessAvatar name="Utaha Kasumigaoka" color="text" />
    <a href="#avatar" aria-label="Eriri's profile"
      ><BlessAvatar :src="shots[0].src" name="Eriri Spencer" lean size="lg"
    /></a>
    <BlessAvatar src="/missing-photo.png" name="Michiru Hyodo" />
  </div>
</template>

Usage

import { BlessAvatar } from "blessing-ui";

API

Props

Name	Type	Default	Description
src	string	—
alt	string	—
name	string	—	used for initials fallback
size	"md" | "sm" | "xs" | "lg" | "xl"	"md"
lean	boolean	—	lean on attention like a plate — its own, or the link or button it sits in
color	"text" | "accent" | "surface"	"surface"

Slots

Name	Scope	Description
default	—