<InitialsAvatar> renders one or two initials on a solid background — perfect for fallback profile pictures.
<script setup>
import { InitialsAvatar } from '@maxnth/gestalt'
</script>
<template>
<InitialsAvatar seed="Maximilian Nöth" :size="96" mode="double" />
</template>
Double initials split the seed by spaces, dashes, underscores, and dots, so Ada Lovelace becomes AL.
| Prop | Type | Default | Description |
|---|---|---|---|
seed | string | number | — | The name or value used to derive the initials. |
size | number | 32 | Rendered size in pixels. |
radius | number | string | "9999px" | Corner radius. Number is pixels; string is CSS. |
mode | "single" | "double" | "single" | Whether to show one or two initials. |
background | string | — | #RGB or #RRGGBB; invalid values use the generated color. |
color | string | — | #RGB or #RRGGBB; invalid values use automatic contrast. |
fontFamily | string | — | Font family for the initials. |
ring | boolean | number | string | false | Optional outline. true = white 2px ring. |
style | object | — | Extra inline styles merged onto the wrapper. |
<InitialsAvatar seed="Jane Doe" :size="96" mode="single" ring />
<InitialsAvatar seed="Jane Doe" :size="96" mode="double" ring />
<InitialsAvatar seed="Ada Lovelace" :size="96" mode="double" background="#1e293b" color="#38bdf8" ring />