Avatar
======

.. raw:: html

   <style data-uid="hXdYW3t-_5E">@keyframes quirl-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes quirl-shimmer{0%{background-position:150% 0;}100%{background-position:-150% 0;}}@keyframes quirl-fade-in{from{opacity:0;}to{opacity:1;}}@keyframes quirl-scale-in{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}@keyframes quirl-slide-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}@keyframes quirl-bounce-dot{0%,80%,100%{transform:scale(0.6);opacity:0.5;}40%{transform:scale(1);opacity:1;}}</style><div data-uid="zEHjB5ZOLp8" id="avatar-docs" style="padding:clamp(20px, 5vw, 32px);gap:20px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;background:#111318;border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;max-width:720px;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;animation:quirl-fade-in 0.3s ease-out;-webkit-animation:quirl-fade-in 0.3s ease-out;-moz-animation:quirl-fade-in 0.3s ease-out;-o-animation:quirl-fade-in 0.3s ease-out"><div data-uid="0.0" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><h2 data-uid="0.0.0" style="margin:0;color:#F5F5F5">Avatar</h2><span data-uid="0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5C842 16%, transparent);color:#F5C842;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">Component</span></div><p data-uid="0.1" style="margin:0;color:rgba(245, 245, 245, 0.6);line-height:1.5">A circular user avatar with image support, initials fallback, and an</p><div data-uid="0.2" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.2.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.3" style="display:flex;flex-direction:column;gap:16px"><div data-uid="0.3.0" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.0.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.0.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Required Props</h4><span data-uid="0.3.0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #FF9F0A 16%, transparent);color:#FF9F0A;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">1</span></div><div data-uid="0.3.0.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.0.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.0.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.0.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">initials</p></div><p data-uid="0.3.0.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Fallback text when no image is provided</p></div></div></div><div data-uid="0.3.1" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.1.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.1.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Optional Props</h4><span data-uid="0.3.1.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5F5F5 16%, transparent);color:#F5F5F5;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">6</span></div><div data-uid="0.3.1.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.1.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">src</p></div><p data-uid="0.3.1.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Image source URL</p></div><div data-uid="0.3.1.1.1" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.1.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.1.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">alt</p></div><p data-uid="0.3.1.1.1.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Alt text for the image</p></div><div data-uid="0.3.1.1.2" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.2.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.2.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">size</p></div><p data-uid="0.3.1.1.2.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">One of xs, sm, md, lg, xl. Defaults to md.</p></div><div data-uid="0.3.1.1.3" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.3.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.3.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">status</p></div><p data-uid="0.3.1.1.3.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">One of online, away, busy, offline. Adds a presence dot.</p></div><div data-uid="0.3.1.1.4" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.4.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.4.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">bg_color</p></div><p data-uid="0.3.1.1.4.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Circle background, defaults to var(--theme-accent-color)</p></div><div data-uid="0.3.1.1.5" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.5.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.5.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">color</p></div><p data-uid="0.3.1.1.5.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Initials color, defaults to var(--theme-surface-color)</p></div></div></div></div><div data-uid="0.4" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.4.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.5" style="flex-direction:column;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><h4 data-uid="0.5.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Usage</h4><div data-uid="0.5.1" style="border-radius:8px;overflow:hidden;max-width:100%"><pre data-uid="0.5.1.0" id="code-block" class="code-block" style="border:1px solid rgba(255, 255, 255, 0.12);border-radius:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;gap:8px;padding:12px 16px;width:100%;background:black;margin:0;color:#F5F5F5;font-family:monospace;font-size:0.85rem;line-height:1.5;max-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-overflow-scrolling:touch"><div data-uid="0.5.1.0.0" class="code-header" id="code-header" style="justify-content:space-between;align-items:center;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><div data-uid="0.5.1.0.0.0" class="code-header-actions" style="align-items:center;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><span data-uid="0.5.1.0.0.0.0" class="code-language-label" style="color:rgba(245, 245, 245, 0.6);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em">python</span><div onclick="copyCode(this);" role="button" tabindex="0" aria-label="Copy code" data-uid="0.5.1.0.0.0.1" class="code-copy-btn" id="code-copy-btn" style="align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;cursor:pointer;color:rgba(255, 255, 255, 0.7);transition:background 0.2s ease, color 0.2s ease;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><span data-uid="0.5.1.0.0.0.1.0" class="code-copy-icon-idle"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V5a1 1 0 0 1 1-1h11"/></svg></span><span data-uid="0.5.1.0.0.0.1.1" class="code-copy-icon-success"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l6 6 10-14"/></svg></span></div></div></div><div data-uid="0.5.1.0.1" class="code-body" style="position:relative;overflow:hidden;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><code data-uid="0.5.1.0.1.0" class="code-block-content language-python" style="overflow-x:auto;overflow-y:hidden;white-space:pre;box-shadow:none;color:#F5F5F5">Avatar(initials='JD', size='lg', status='online')</code></div><script data-uid="0.5.1.0.2">function copyCode(button) {
   const codeBlock = button.closest("pre");
   const code = codeBlock ? codeBlock.querySelector("code") : null;
   if (!code) {
   return;
   }
   if (!navigator.clipboard) {
   console.warn("Clipboard API unavailable, copy requires a secure (HTTPS) context.");
   return;
   }
   navigator.clipboard.writeText(code.innerText)
   .then(() => {
   button.classList.add("copied");
   setTimeout(() => button.classList.remove("copied"), 2000);
   })
   .catch((err) => console.error("Failed to copy code: ", err));
   }</script><style data-uid="0.5.1.0.3">.code-copy-btn:hover,.code-collapse-footer:hover{background:rgba(255,255,255,0.1);}.code-collapse-footer:hover{color:#F5F5F5;}.code-copy-btn .code-copy-icon-success{display:none;}.code-copy-btn.copied .code-copy-icon-idle{display:none;}.code-copy-btn.copied .code-copy-icon-success{display:inline-flex;}.code-block.collapsible .code-body{max-height:320px;}.code-block.collapsible.expanded .code-body{max-height:none;}.code-fade{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,transparent,black);pointer-events:none;}.code-block.expanded .code-fade{display:none !important;}.code-collapse-footer{color:rgba(245,245,245,0.6);font-size:0.8rem;font-weight:500;}.code-collapse-label-less{display:none;}.code-block.expanded .code-collapse-label-more{display:none;}.code-block.expanded .code-collapse-label-less{display:inline;}.code-collapse-icon{transition:transform 0.2s ease;}.code-block.expanded .code-collapse-icon{transform:rotate(180deg);}</style></pre></div></div><div data-uid="0.6" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.6.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.7" style="border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;padding:clamp(16px, 4vw, 24px);overflow:hidden;background:#1C1F26;box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);max-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;gap:4px"><h4 data-uid="0.7.0" style="margin:0;color:#F5F5F5">Live Preview</h4><div data-uid="0.7.1" id="demo-AgoXN4gNC24-stage" style="position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:72px;width:100%;box-sizing:border-box;padding:8px 0"><div data-uid="0.7.1.0" style="position:relative;-webkit-sticky:relative;display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;width:48px;height:48px;flex-shrink:0"><div data-uid="0.7.1.0.0" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#F5C842;color:#111318;font-weight:600;font-size:calc(48px * 0.4);box-shadow:0 1px 2px rgba(0, 0, 0, 0.24)"><label data-uid="0.7.1.0.0.0" style="color:inherit;font-size:inherit;font-weight:inherit">JD</label></div><div aria-label="Status: online" data-uid="0.7.1.0.1" style="position:absolute;bottom:0;right:0;width:calc(48px * 0.28);height:calc(48px * 0.28);min-width:8px;min-height:8px;border-radius:50%;background:#30D158;border:2px solid #111318"></div></div></div></div></div>