Avatar

API reference and demos for Avatar.

Source

Import

import { Avatar } from "@flanksource/clicky-ui/data";

Demos

Initial Fallback · Open in Storybook

Exploration · Open in Storybook

Pipeline Context · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
alt*	string	—	Accessible name and fallback text seed.
className	string	—	Classes applied to the avatar root.
colorKey	string	—	Selects the palette color for the initial-fallback. Defaults to `alt` so repeated rendering of the same identity stays consistent. Pass the full "owner/name" for repo avatars so two repos named "cli" under different orgs render with different colors.
href	string	—	Optional link URL.
initials	string	—	Explicit fallback initials. Defaults to initials derived from `alt`.
kind	enum	user	Identity type, used to choose fallback palette rules.
onError	(…) => void	—	Called when the image fails to load.
rounded	enum	—	Border radius style.
size	enum	sm	Named size token (xs..xl). The rendered px is resolved through the active density (`compact` shrinks, `spacious` grows). Size also drives typographic adjustments: `xs` shows a single initial; `sm` uses a lighter weight so the monogram stays quiet in dense list rows.
src	string	—	Image URL for the avatar. Falls back to initials when loading fails.
title	string	—	Browser tooltip.
variant	enum	duotone	Fallback visual style.