Avatar
Recognize a person by their photo, with initials shown while the photo loads or if it is unavailable.
APISMK
<script setup lang="ts">import { UiAvatar } from 'grani'</script> <template> <UiAvatar name="Anna Petrova" alt="Anna Petrova" /> <UiAvatar name="Ivan Sidorov" tone="success" alt="Ivan Sidorov" /> <UiAvatar name="Maria Kova" tone="warning" alt="Maria Kova" /></template>
Also called user avatar, profile picture, initials.
Usage
<UiAvatar :name="name" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| name*string | Whose it is; the initials come from its first two words ("Anna Petrova" is "AP"). | |
| srcstring= "" | "" | A photo; when it is missing or fails to load, the initials stand in. |
| altstring= "" | "" | Alone, what it shows ("Anna Petrova"); beside the name leave it empty: it is decoration. |
| sizexs | sm | md= "sm" | "sm" | xs 24, sm 32, md 40: beside a dense row, a row, a page row. |
| tonebrand | neutral | success | warning | danger | info= "brand" | "brand" | The plate behind the initials. |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| A state mark on it | Indicator round |
| A state word | Badge |
| A count | Count |
| A glyph that acts | Icon button |