Skip to content

← All components

Brand and content

Avatar

Responsive avatar image with accessible initials fallback.

Live example

Ada LovelaceGH

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Avatar } from "@cofob/design-system-react";

/**
 * Complete Avatar parameter reference.
 * @param image
 *   type: ResponsiveImageModel
 *   default: —
 *   example: {avatar}
 * @param name
 *   type: string
 *   required
 *   example: "Ada Lovelace"
 * @param alt
 *   type: string
 *   default: —
 *   example: "Ada Lovelace"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param loading
 *   type: "eager" | "lazy"
 *   default: "lazy"
 *   example: true
 * @param referrerPolicy/referrerpolicy
 *   type: HTML referrer policy
 *   default: "no-referrer"
 *   example: "no-referrer"
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function AvatarExample() {
  return (
    <Avatar image={avatar} name="Ada Lovelace" />
  );
}

Svelte

svelte
<script lang="ts">
  import { Avatar } from "@cofob/design-system-svelte";

  // Complete Avatar parameter reference.
  // image
  //   type: ResponsiveImageModel
  //   default: —
  //   example: {avatar}
  // name
  //   type: string
  //   required
  //   example: "Ada Lovelace"
  // alt
  //   type: string
  //   default: —
  //   example: "Ada Lovelace"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // loading
  //   type: "eager" | "lazy"
  //   default: "lazy"
  //   example: true
  // referrerPolicy/referrerpolicy
  //   type: HTML referrer policy
  //   default: "no-referrer"
  //   example: "no-referrer"
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Avatar image={avatar} name="Ada Lovelace" />

HTML

html
<!--
  Complete Avatar parameter reference.
  image
    type: ResponsiveImageModel
    default: —
    example: {avatar}
  name
    type: string
    required
    example: "Ada Lovelace"
  alt
    type: string
    default: —
    example: "Ada Lovelace"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  loading
    type: "eager" | "lazy"
    default: "lazy"
    example: true
  referrerPolicy/referrerpolicy
    type: HTML referrer policy
    default: "no-referrer"
    example: "no-referrer"
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-avatar" data-size="md"><img src="avatar.jpg" alt="Ada Lovelace" /></span>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
imageResponsiveImageModel—React · Svelte · HTML{avatar}Light-theme responsive source, alternative text, dimensions, and srcset data.
namerequiredstringrequiredReact · Svelte · HTML"Ada Lovelace"Identifies a native form field or named entity, depending on the component.
altstring—React · Svelte · HTML"Ada Lovelace"Alternative text; use an empty string when the image is decorative.
size"sm" | "md" | "lg" (plus heading sizes)"md"React · Svelte · HTML"md"Applies a design-system size token.
loading"eager" | "lazy""lazy"React · Svelte · HTMLtrueShows progress, preserves width, and disables repeated activation.
referrerPolicy/referrerpolicyHTML referrer policy"no-referrer"React · Svelte · HTML"no-referrer"Controls referrer data sent while loading a remote avatar.
span attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.