Avatar
A circular image with a fallback for when the image fails to load or no source is provided.
Usage
<span class="zui-avatar">
<span class="zui-avatar-fallback"><i class="ph ph-user" aria-hidden="true"></i></span>
<img
class="zui-avatar-image"
src="/avatar.webp"
alt="User"
onerror="this.setAttribute('data-error', '')"
/>
</span>import { Avatar } from '@mrmartineau/zui/react'
<Avatar src="/avatar.webp" alt="User" />---
import { Avatar } from '@mrmartineau/zui/astro'
---
<Avatar src="/avatar.webp" alt="User" />import { Avatar } from '@mrmartineau/zui/solid'
<Avatar src="/avatar.webp" alt="User" /><script lang="ts">
import { Avatar } from '@mrmartineau/zui/svelte'
</script>
<Avatar src="/avatar.webp" alt="User" /><template>
<Avatar src="/avatar.webp" alt="User" />
</template>
<script setup>
import { Avatar } from '@mrmartineau/zui/vue'
</script>Fallback
When no src is provided or the image fails to load, the fallback content is shown. If no fallback is specified, a default user icon is displayed.
Default icon fallback
<span class="zui-avatar">
<span class="zui-avatar-fallback"><i class="ph ph-user" aria-hidden="true"></i></span>
</span>import { Avatar } from '@mrmartineau/zui/react'
<Avatar />---
import { Avatar } from '@mrmartineau/zui/astro'
---
<Avatar />import { Avatar } from '@mrmartineau/zui/solid'
<Avatar /><script lang="ts">
import { Avatar } from '@mrmartineau/zui/svelte'
</script>
<Avatar /><template>
<Avatar />
</template>
<script setup>
import { Avatar } from '@mrmartineau/zui/vue'
</script>Initials fallback
AB
<span class="zui-avatar">
<span class="zui-avatar-fallback">AB</span>
</span>import { Avatar } from '@mrmartineau/zui/react'
<Avatar fallback="AB" />---
import { Avatar } from '@mrmartineau/zui/astro'
---
<Avatar fallback="AB" />import { Avatar } from '@mrmartineau/zui/solid'
<Avatar fallback="AB" /><script lang="ts">
import { Avatar } from '@mrmartineau/zui/svelte'
</script>
<Avatar fallback="AB" /><template>
<Avatar fallback="AB" />
</template>
<script setup>
import { Avatar } from '@mrmartineau/zui/vue'
</script>Sizes
ABABAB
<span class="zui-avatar zui-avatar-size-sm">
<span class="zui-avatar-fallback">AB</span>
</span>
<span class="zui-avatar">
<span class="zui-avatar-fallback">AB</span>
</span>
<span class="zui-avatar zui-avatar-size-lg">
<span class="zui-avatar-fallback">AB</span>
</span>import { Avatar } from '@mrmartineau/zui/react'
<Avatar size="sm" fallback="AB" />
<Avatar fallback="AB" />
<Avatar size="lg" fallback="AB" />---
import { Avatar } from '@mrmartineau/zui/astro'
---
<Avatar size="sm" fallback="AB" />
<Avatar fallback="AB" />
<Avatar size="lg" fallback="AB" />import { Avatar } from '@mrmartineau/zui/solid'
<Avatar size="sm" fallback="AB" />
<Avatar fallback="AB" />
<Avatar size="lg" fallback="AB" /><script lang="ts">
import { Avatar } from '@mrmartineau/zui/svelte'
</script>
<Avatar size="sm" fallback="AB" />
<Avatar fallback="AB" />
<Avatar size="lg" fallback="AB" /><template>
<Avatar size="sm" fallback="AB" />
<Avatar fallback="AB" />
<Avatar size="lg" fallback="AB" />
</template>
<script setup>
import { Avatar } from '@mrmartineau/zui/vue'
</script>Shapes
ABABABAB
<span class="zui-avatar">
<span class="zui-avatar-fallback">AB</span>
</span>
<span class="zui-avatar zui-avatar-shape-hard">
<span class="zui-avatar-fallback">AB</span>
</span>
<span class="zui-avatar zui-avatar-shape-soft">
<span class="zui-avatar-fallback">AB</span>
</span>
<span class="zui-avatar zui-avatar-shape-squircle">
<span class="zui-avatar-fallback">AB</span>
</span>import { Avatar } from '@mrmartineau/zui/react'
<Avatar fallback="AB" />
<Avatar shape="hard" fallback="AB" />
<Avatar shape="soft" fallback="AB" />
<Avatar shape="squircle" fallback="AB" />---
import { Avatar } from '@mrmartineau/zui/astro'
---
<Avatar fallback="AB" />
<Avatar shape="hard" fallback="AB" />
<Avatar shape="soft" fallback="AB" />
<Avatar shape="squircle" fallback="AB" />import { Avatar } from '@mrmartineau/zui/solid'
<Avatar fallback="AB" />
<Avatar shape="hard" fallback="AB" />
<Avatar shape="soft" fallback="AB" />
<Avatar shape="squircle" fallback="AB" /><script lang="ts">
import { Avatar } from '@mrmartineau/zui/svelte'
</script>
<Avatar fallback="AB" />
<Avatar shape="hard" fallback="AB" />
<Avatar shape="soft" fallback="AB" />
<Avatar shape="squircle" fallback="AB" /><template>
<Avatar fallback="AB" />
<Avatar shape="hard" fallback="AB" />
<Avatar shape="soft" fallback="AB" />
<Avatar shape="squircle" fallback="AB" />
</template>
<script setup>
import { Avatar } from '@mrmartineau/zui/vue'
</script>CSS custom properties
Set these on :root, on a wrapper, or on the element. See Component custom properties.
| Property | Default | Description |
|---|---|---|
--zui-avatar-size |
2.5rem |
Width and height. Sizes sm and lg set their own. |
--zui-avatar-radius |
var(--radius-full) |
Border radius |
--zui-avatar-font-size |
90% |
Font size of the fallback text |
--zui-avatar-bg |
var(--color-surface) |
Background colour |
--zui-avatar-border |
var(--color-border) |
Border colour |
--zui-avatar-fg |
var(--color-text) |
Fallback text colour |