Avatar
Overview
Avatar is used to visually represent a user, system, or identity in the interface, helping users quickly recognize context.
The avatar supports four types:
-
Person
-
Anonymous
-
System
-
No Avatar
Each avatar supports two states:
-
Default
-
Disabled
Person
Represents a real, identifiable user.
Default
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disabled
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Anonymous
Represents an unidentified or hidden user.
Default
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disabled
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
System
Represents a system, service, or automated entity.
Default
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disabled
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
No Avatar
Represents the absence of an avatar.
Default
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Disabled
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Avatar Group
Depending on the request, the avatar will be displayed as follows:
- Limited display: When the number of avatar exceeds the defined limit, the remaining avatar are represented by a “+N” indicator. Hovering over the “+N” indicator will display the hidden username in the tooltip.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Use avatars consistently to help users recognize context quickly.
✨ Use Person avatars only for real users.
✨ Use Anonymous avatars when privacy is required.
✨ Use System avatars only for system-generated content.
✨ Disabled avatars should clearly appear non-interactive.
✨ Keep avatar sizes consistent within the same view.
✨ Do not rely on avatars alone for critical information—use text when needed.
Figma
All details and specifications in the design can be referenced through the Figma link below.