Avatar

Identifies a person or an organisation by a photo, or by initials when there is none.

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <span class="type-body flex items-center gap-2">
    <FsAvatar name="Sanne de Vries" />
    Sanne de Vries
  </span>
</template>

Usage

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <FsAvatar name="Sanne de Vries" />
</template>

When the name is written beside the avatar, leave out label: the avatar is then decorative. Give it a label, usually the name, only when it stands alone. To make an avatar clickable, put it inside a Button. For a photo, give src; if the image fails to load, the initials show instead, or an icon when no initials can be made.

Examples

Person and organisation

A person is a circle with up to two initials; an organisation is a square with one.

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <FsAvatar name="Sanne de Vries" :size="32" label="Sanne de Vries" />
    <FsAvatar name="Fivespark B.V." kind="organisation" :size="32" label="Fivespark B.V." />
  </div>
</template>

Sizes

size is 20, 24 (the default), 32 or 36 pixels.

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <FsAvatar name="Sanne de Vries" :size="20" label="Sanne de Vries" />
    <FsAvatar name="Sanne de Vries" label="Sanne de Vries" />
    <FsAvatar name="Sanne de Vries" :size="32" label="Sanne de Vries" />
    <FsAvatar name="Sanne de Vries" :size="36" label="Sanne de Vries" />
  </div>
</template>

Name parts

Initials come from the name. Pass given-name, surname-prefix and surname when you have them, so that a prefix such as "van der" is known rather than guessed.

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <FsAvatar given-name="Jan" surname-prefix="van der" surname="Berg" :size="32" label="Jan van der Berg" />
</template>

Icon fallback

When no initials can be made, because there is no name or it has no Latin letters, an icon shows: a person for a person, a building for an organisation. Give it a label, since there is no name beside it.

<script setup lang="ts">
import { FsAvatar } from '@fivespark/ui'
</script>

<template>
  <div class="flex items-center gap-4">
    <FsAvatar label="Onbekende contactpersoon" />
    <FsAvatar kind="organisation" label="Onbekende organisatie" />
  </div>
</template>

API Reference

FsAvatar

Prop	Type	Default	Description
src	string		The image. Without it, or when it fails to load, the initials or an icon show instead.
name	string		The full name as displayed. A person's initials come from its first and last words when the name parts are not given; an organisation's one initial from its first word, B.V. and the like skipped.
givenName	string		A person's given name: the first initial.
surnamePrefix	string		A surname prefix such as "van der". Never an initial: Jan van der Berg is JB.
surname	string		The surname without its prefix: the second initial. A Belgian "Van Damme" keeps "Van" here.
initials	string		Replaces the initials worked out from the name. At most two letters, one at size 20.
kind	"person" | "organisation"	"person"	A person is a circle; an organisation a rounded square, with one initial.
size	20 | 24 | 32 | 36	24	20 beside body text, 24 in a list row, 32 and 36 beside a dense or default control.
label	string		Only for an avatar with no name beside it: what a screen reader announces, usually the name.
referrerPolicy	"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"	"no-referrer"	Passed to the image. Sends no referrer unless changed.
crossOrigin	"" | "anonymous" | "use-credentials"		Passed to the image.

Event	Payload	Description
loadingStatusChange	[status: Status]	The image started loading, loaded, or failed: `loading`, `loaded` or `error`.