Avatar

An image element with a fallback for representing the user.

Props

src

stringThe image source.

alt

stringThe image alt text.

size

numberThe size of the avatar.

fallbackDelayMs

numberUseful for delaying rendering so it only appears for those with slower connections.

import * as React from "react";
import { Avatar } from "basics";

export default () => {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/23662329?v=4"
      alt="Rauno Freiberg"
    />
  );
}

import * as React from "react";
import { Avatar } from "basics";

export default () => {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/23662329?v=4"
      alt="Rauno Freiberg"
    />
  );
}

Fallback

The fallback automatically renders as part of <Avatar /> when the image fails to load.
You can also use it to generate unique avatars for when a user does not have an image at all.


<Flex gap="16">
  <Avatar.Fallback>Bruce Wayne</Avatar.Fallback>
  <Avatar.Fallback>Steve Rogers</Avatar.Fallback>
  <Avatar.Fallback>Clark Kent</Avatar.Fallback>
</Flex><Flex gap="16">
  <Avatar.Fallback>Bruce Wayne</Avatar.Fallback>
  <Avatar.Fallback>Steve Rogers</Avatar.Fallback>
  <Avatar.Fallback>Clark Kent</Avatar.Fallback>
</Flex>