ZUI — Avatar

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

<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

Property	Default	Description
`--zui-avatar-size`	`2.5rem`	Width and height of the avatar
`--zui-avatar-radius`	`var(--radius-full)`	Border radius
`--zui-avatar-font-size`	`90%`	Font size of the fallback text