AH AH AH

); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Avatar } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" AvatarStyleCircleSizes"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center space-x-4"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Image"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"/images/avatar.jpeg"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Arif Logs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Fallback"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">AH"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-16 w-16"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Image"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"/images/avatar.jpeg"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Arif Logs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Fallback"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">AH"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"h-20 w-20"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Image"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"/images/avatar.jpeg"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Arif Logs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Fallback"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">AH"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(l.h3,{id:"fallbacks",children:"Fallbacks"}),` `,(0,n.jsxs)(l.p,{children:[`Fallbacks are helpfull when there ia an error loading the src of the avatar. You can set fallbacks with `,(0,n.jsx)(l.code,{children:"Avatar.Fallback"})," component."]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(a,{name:"avatar-style-circle-fallbacks",children:(0,n.jsx)(l.figure,{__src__:"preview/components/avatar-style-circle-fallbacks.tsx",__rawString__:`import { Avatar } from "@/components/ui"; export default function AvatarStyleFallback() { return ( AH ); } `,"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Avatar } "}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/ui"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#62E884"},children:" AvatarStyleFallback"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Image"}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"broken-link"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" alt"}),(0,n.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#E7EE98"},children:"Arif Logs"}),(0,n.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Avatar.Fallback"}),(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:">AH"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(F,e)})):F(e)}var S=g;function s(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return u(b);})(); ;return Component;

Avatar

Examples

Size variants

Fallbacks