Avatar

Image with an initials fallback on a tone derived from the name. Images reveal from a blur, fallbacks pop in, and an online status pings.

Preview

Open in the playground

Usage

AvatarExample.vueVue / TS

<script setup lang="ts">
import { FzAvatar } from '@chrisdalbano/forza-ui'
</script>

<template>
  <FzAvatar name="Ana Reyes" status="online" />
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
name	string	Yes	None
src	string | undefined	No	None
size	"md" | "sm" | "lg" | undefined	No	"md"
status	"online" | "away" | "busy" | "offline" | undefined	No	None

Events and state

stateless

Slots

none

Add from source

forza add avatar

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.