MenuCaderno UI
npmGitHub
Theme

<cad-avatar>

Avatar

Identify a person with initials, a portrait, or a doodle. Add a presence indicator when needed.

Author identity

Sizes and presence

Portraits and presence indicators are optional.

Small · initials

Medium · away

Large · portrait

API reference: <cad-avatar>

descriptiondescriptionstring''namenamestring''sizesizeCadAvatarSize'md'srcsrcstring''statusstatusCadAvatarStatus | ''''status-labelstatusLabelstring''descriptionstringdescriptionnonamestringnamenosizeCadAvatarSizesizeyessrcstringsrcnostatusCadAvatarStatus | ''statusyesstatusLabelstringstatus-labelnoimageCustom portrait content.nameVisible name. Falls back to the `name` attribute.descriptionSupporting text. Falls back to the `description` attribute.baseIdentity container.copyName and description stack.descriptionSupporting text.imagePortrait surface.nameVisible name.statusPresence indicator.--cad-avatar-bgPortrait wash color.--cad-avatar-inkPortrait outline and text color.

Accessibility

Keep portraits and nested doodles decorative when the name is already visible. Translate status-label when showing a presence indicator.

MIT licensed. Built with Caderno UI.Report an issue
Back to top