ProspectAvatar

Guidelines#

Use it for prospects and contacts in Unibox, lists and deal cards.

What you provide: name, photoUrl (optional), size (sm 36px, md 44px, lg 64px, xl 80px) and unread.

Anatomy: a 1px border ring at 60% with shadow-sm; without a photo, initials on a 135° gradient chosen from six pairs (ember, twilight, lagoon, moss, orchid, dune), so the same name always gets the same colour. Unread adds a 2px primary halo at 60% that pulses every 2.6s (static under reduced motion).

Facts#

API#

TypeScript declarations emitted from src/features/unibox/ui/components/prospect-avatar.tsx.

declare const SIZES: {
    readonly sm: "size-9 text-xs";
    readonly md: "size-11 text-sm";
    readonly lg: "size-16 text-lg";
    readonly xl: "size-20 text-xl";
};
interface ProspectAvatarProps {
    name: string;
    photoUrl?: string | null;
    size?: keyof typeof SIZES;
    /** Show the breathing unread ring around the avatar. */
    unread?: boolean;
    className?: string;
}
export declare function ProspectAvatar({ name, photoUrl, size, unread, className, }: ProspectAvatarProps): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex items-end gap-5" },
    h(DC.ProspectAvatar, { name: "Claire Dubois", size: "sm" }),
    h(DC.ProspectAvatar, { name: "Marcus Webb", size: "md", unread: true }),
    h(DC.ProspectAvatar, { name: "Aiko Tanaka", size: "lg" }),
    h(DC.ProspectAvatar, { name: "Lena Fischer", size: "xl" }),
    h(DC.ProspectAvatar, { name: "Omar Haddad", size: "md" }),
    h(DC.ProspectAvatar, { name: "Sofia Almeida", size: "md" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#