LogoLogo
  • What is UDML?
  • Document structure
    • <components>
    • <imports>
    • <instructions>
    • <meta>
    • <styles>
    • <tokens>
    • <mappings>
    • <screens>
  • Directives
    • ai-hint
    • <data> Directive Specification
    • <interaction> Directive
    • <layer> Directive
    • <repeat> Directive
    • <responsive>
    • selection
    • <tracking> Directive
  • Components
    • Layout
      • <accordion> Component
      • <box> Component
      • <column> Component
      • <divider>
      • <grid> Component
      • <row> Component
    • Navigation
      • <breadcrumbs> Component
      • <pagination> Component
      • <tab> Component
      • <tabs> Component
    • Text & Display
      • <avatar>
      • <heading>
      • <icon>
      • <image>
      • <label>
      • <text>
      • <video>
    • Controls & Input
      • <button>
      • <checkbox>
      • <input> Component
      • <radio>
      • <select>
      • <slider>
      • <stepper>
      • <switch>
      • <textarea>
    • Forms
      • <form> Component
      • <formField> Component
      • <formGroup> Component
    • Data Collections
      • <dataColumn> Component
      • <dataTable> Component
      • <list> Component
      • <timeline> Component
      • <treeView> Component
    • Data Visualization
      • <chart> Component
      • <summary> Component
    • Modals
      • <dialog> Component
      • <modal> Component
      • <popover> Component
      • <toast> Component
      • <tooltip> Component
  • Prompting Guides
    • Prompting AI Developer Tools with UDML
    • Working with UDML in an Existing Codebase
  • Contributing to UDML
Powered by GitBook
On this page
  • The <avatar> component displays a profile image or initials as a circular or rounded shape.
  • 🛠 Attributes
  • ✅ Allowed Content
  • 💡 Examples
  • 🧩 AI Interpretation Guidelines
Edit on GitHub
  1. Components
  2. Text & Display

<avatar>

The <avatar> component displays a profile image or initials as a circular or rounded shape.

🛠 Attributes

Attribute
Type
Required
Description

src

string

No

Image source URL

alt

string

No

Accessible label (e.g., user's name)

initials

string

No

Fallback initials (e.g., JD)

size

string

No

sm, md, lg, or exact pixel value

radius

string

No

full, rounded, or custom

✅ Allowed Content

Self-closing only.

💡 Examples

User avatar

<avatar src="/images/user.png" alt="Jane Doe"/>

Initials fallback

<avatar initials="JD" size="lg"/>

🧩 AI Interpretation Guidelines

  • Render with image and fallback initials logic.

  • Ensure circle or rounded frame with border-radius.

  • Map to user profile display components.

PreviousText & DisplayNext<heading>

Last updated 1 month ago