Avatar and Kbd

Preview

Small identity and keyboard-hint primitives for report headers and controls.

Usage

<Avatar name="Morgan Lee" size="sm" />
<Kbd>⌘K</Kbd>

Avatar uses a name for initials and image fallback. A Kbd element displays a shortcut; it does not register an event handler. Use the application keyboard handler or useHotkey to implement the action.

Avatar

PropTypeDefaultDescription

namerequiredstring—Full name: used for the initials, the accessible label and the default color.

srcstring—Image URL. Falls back to initials if it fails to load.

size'sm' | 'md' | 'lg'AvatarSize—sm 24 · md 28 · lg 36 px. Inside an AvatarGroup, defaults to the group's size.

colornumber—Categorical color 1–8; defaults to one derived from the name.

Also accepts the props of Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'>, spread onto the root element.

AvatarGroup

PropTypeDefaultDescription

maxnumber—Show at most this many avatars, then a "+N" chip.

size'sm' | 'md' | 'lg'AvatarSize'md'—

childrenReactNode——

Also accepts the props of HTMLAttributes<HTMLDivElement>, spread onto the root element.

Kbd

PropTypeDefaultDescription

variant'raised' | 'flat''raised'raised has a thicker bottom edge; flat sits on a tinted fill (search fields, palettes).

Also accepts the props of HTMLAttributes<HTMLElement>, spread onto the root element.

Report an issueBuilt Oct 21, 2026