Components
Avatar
Avatar, dressed in the paper-and-ink system: a circular seal on inset paper that holds initials until the image loads over them. `size` picks a control-height rung for the seal — the core styles re-point `--bs-avatar-size` per rung, and scenes can still retune the variable directly.
#Basic usage
S
BS
墨
印
<script setup lang="ts">
import { Avatar } from "@bysages/vue";
const PORTRAIT =
"data:image/svg+xml;utf8," +
encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" width="144" height="144"><rect width="144" height="144" fill="#b9b2a4"/><circle cx="72" cy="56" r="26" fill="#3a3733"/><path d="M24 132c6-30 26-44 48-44s42 14 48 44" fill="#3a3733"/></svg>`,
);
</script>
<template>
<div class="flex gap-3 items-center">
<Avatar.Root>
<Avatar.Fallback>S</Avatar.Fallback>
<Avatar.Image :src="PORTRAIT" alt="Portrait of Sage" />
</Avatar.Root>
<Avatar.Root>
<Avatar.Fallback>BS</Avatar.Fallback>
</Avatar.Root>
</div>
<div class="mt-4 flex items-center gap-3">
<Avatar.Root>墨</Avatar.Root>
<Avatar.Root shape="square">印</Avatar.Root>
</div>
</template>
#Props
#Fallback
A styled part — no props of its own; it takes the anatomy's shared styling.
#Image
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
size | String as PropType<AvatarSize> | "md" | Seal diameter: one rung of the control-height ladder — the default is the md rung, level with the other control families, so an avatar rides a row without stretching it. |
shape | String as PropType<"circle" | "square"> | "circle" | The corner: round by default; square cuts it sharp, a stamp beside a round portrait. |
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. |