{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/avatar","result":{"data":{"current":{"frontmatter":{"title":"Avatar","order":62,"brief":"Avatar, used for image or text display.","icon":"doc-avatar"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#size","title":"Size"},{"url":"#color","title":"Color"},{"url":"#adaptive-character-size","title":"Adaptive character size"},{"url":"#image","title":"Image"},{"url":"#shape","title":"Shape"},{"url":"#event","title":"Event"},{"url":"#top-and-bottom-slot","title":"Top and Bottom Slot","items":[{"url":"#top","title":"Top"},{"url":"#bottom","title":"Bottom"}]},{"url":"#additional-border","title":"Additional border"},{"url":"#additional-animation","title":"Additional Animation"},{"url":"#avatargroup","title":"AvatarGroup"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#avatar","title":"Avatar"},{"url":"#avatargroup-1","title":"AvatarGroup"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 62,\n  \"category\": \"Show\",\n  \"title\": \"Avatar\",\n  \"subTitle\": \"avatar\",\n  \"icon\": \"doc-avatar\",\n  \"brief\": \"Avatar, used for image or text display.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Avatar, AvatarGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can change the size of the avatars with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" property. The following sizes are supported:  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-extra-small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-small\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"large\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra-large\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar size=\\\"extra-extra-small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"extra-small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"small\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"default\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar style={{ margin: 4 }} alt='User'>U</Avatar>\\n        <Avatar size=\\\"large\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n        <Avatar size=\\\"extra-large\\\" style={{ margin: 4 }} alt='User'>\\n            U\\n        </Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Color\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatars support 16 colors including \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"white\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"amber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"cyan\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indigo\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light-blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light-green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lime\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pink\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"purple\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"red\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"teal\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"violet\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yellow\"), \". You can also use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" prop to customize styles. The default color is\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"grey\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }} alt='Alice Swift'>AS</Avatar>\\n        <Avatar color=\\\"red\\\" style={{ margin: 4 }} alt='Bob Matteo'>\\n            BM\\n        </Avatar>\\n        <Avatar color=\\\"light-blue\\\" style={{ margin: 4 }} alt='Taylor Joy'>\\n            TJ\\n        </Avatar>\\n        <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf', margin: 4 }} alt='Zank Lance'>ZL</Avatar>\\n        <Avatar style={{ backgroundColor: '#87d068', margin: 4 }} alt='Youself Zhang'>YZ</Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Adaptive character size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For the avatar of the character type, the font size will be adjusted adaptively according to the width of the avatar. Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gap\"), \" to adjust the pixel size on the left and right sides of the character avatar distance.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }}>AS</Avatar>\\n        <Avatar style={{ margin: 4 }} gap={4}>Semi</Avatar>\\n        <Avatar style={{ margin: 4 }} gap={10}>Semi</Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Image\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Image avatars can be created by using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"srcSet\"), \" prop.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar\\n            alt=\\\"beautiful cat\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n        />\\n        <Avatar\\n            alt=\\\"cute cat\\\"\\n            size=\\\"small\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n        />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Shape\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatars support two shapes: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"circle\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"square\"), \". The shape is default to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"circle\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Avatar style={{ margin: 4 }} alt=\\\"User\\\">U</Avatar>\\n        <Avatar shape=\\\"square\\\" style={{ margin: 4 }} alt=\\\"User\\\">\\n            U\\n        </Avatar>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Event\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Avatars support \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseEnter\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onMouseLeave\"), \". You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hoverMask\"), \" prop to pass in overlay content for \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hover\"), \" state.\\nThe overlay has no default style.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\nimport { IconCamera } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const style = {\\n        backgroundColor: 'var(--semi-color-overlay-bg)',\\n        height: '100%',\\n        width: '100%',\\n        display: 'flex',\\n        alignItems: 'center',\\n        justifyContent: 'center',\\n    };\\n    const hover = (\\n        <div style={style}>\\n            <IconCamera />\\n        </div>\\n    );\\n\\n    return (\\n        <Avatar hoverMask={hover} color=\\\"red\\\" alt='Bob Downton'>\\n            BD\\n        </Avatar>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Top and Bottom Slot\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n<Avatar\\n            alt=\\\"beautiful cat\\\"\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            style={{ margin: 4 }}\\n            size=\\\"large\\\"\\n            border={{color:\\\"#FE2C55\\\",motion:true}}\\n            contentMotion={true}\\n            topSlot={{\\n                text: \\\"LIVE\\\", \\n                gradientStart:\\\"rgb(255,23,100)\\\",\\n                gradientEnd:\\\"rgb(237,52,148)\\\"\\n            }}\\n            bottomSlot={{\\n                shape: \\\"circle\\\",\\n                bgColor:\\\"#FE2C55\\\",\\n                text: <IconPlus/>\\n            }}\\n/>\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Top\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" topSlot={{\\n            text: \\\"LIVE\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" topSlot={{\\n            text: \\\"LIVE\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" topSlot={{\\n            text: \\\"LIVE\\\",\\n            gradientStart:\\\"rgb(255,23,100)\\\",\\n            gradientEnd:\\\"rgb(237,52,148)\\\"\\n        }}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Bottom\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            content: \\\"LIVE\\\"\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            content: \\\"LIVE\\\"\\n        }}>T</Avatar>\\n        \\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" bottomSlot={{\\n            shape: \\\"square\\\", \\n            bgColor:'#FE2C55',\\n            content: \\\"LIVE\\\"\\n        }}>T</Avatar>\\n        \\n        <br/>\\n        <br/>\\n        <br/>\\n        <Avatar color=\\\"amber\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            content: <IconPlus/>\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"large\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            content: <IconPlus/>\\n        }}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" size=\\\"extra-large\\\" bottomSlot={{\\n            shape: \\\"circle\\\", \\n            bgColor:'#FE2C55',\\n            content: <IconPlus/>\\n        }}>T</Avatar>\\n    </div>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Additional border\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"\\n()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Additional Animation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Turn on additional animation effects for borders and content areas through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border={motion:true}\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contentMotion\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"\\n()=>{\\n    return <div>\\n\\n        <Avatar color=\\\"amber\\\" border={true} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true}  size={\\\"large\\\"} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>\\n\\n        <Avatar color=\\\"amber\\\" border={true} size={\\\"extra-large\\\"} style={{marginRight:'8px'}} borderMotion={true} contentMotion={true}>T</Avatar>\\n    \\n    </div>\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AvatarGroup\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"AvatarGroup\"), \" component to display avatars as a group.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar, AvatarGroup } from '@douyinfe/semi-ui';\\n\\nimport React from 'react';\\nimport { AvatarGroup, Avatar } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <AvatarGroup>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the number of avatars to display with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxCount\"), \" property.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar, AvatarGroup } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <AvatarGroup maxCount={3}>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the more tag with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMore\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar, AvatarGroup, Popover } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const renderMore = (restNumber, restAvatars) => {\\n        const content = (\\n            restAvatars.map((avatar, index) => {\\n                return (\\n                    <div style={{ paddingBottom: '12px' }} key={index}>\\n                        {React.cloneElement(avatar, { size: 'extra-small' })}\\n                        <span style={{ marginLeft: 8, fontSize: 14 }}>This is a sentence</span>\\n                    </div>\\n                );\\n            })\\n        );\\n        return (\\n            <Popover content={content} autoAdjustOverflow={false} position={'bottomRight'} style={{ padding: '12px 8px', paddingBottom: 0 }}>\\n                <Avatar>\\n                    {`+${restNumber}`}\\n                </Avatar>\\n            </Popover>\\n        );\\n    };\\n\\n    return (\\n        <AvatarGroup maxCount={3} renderMore={renderMore}>\\n            <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n            <Avatar alt='Caroline Xiao'>CX</Avatar>\\n            <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n            <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n        </AvatarGroup>\\n    );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the coverage direction of the avatars with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overlapFrom\"), \". It has two optional values A and B. The default value is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Avatar, AvatarGroup } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <div>\\n            <AvatarGroup overlapFrom={'start'}>\\n                <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n                <Avatar alt='Caroline Xiao'>CX</Avatar>\\n                <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n                <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n            </AvatarGroup>\\n        </div>\\n        <div>\\n            <AvatarGroup overlapFrom={'end'}>\\n                <Avatar color=\\\"red\\\" alt='Lisa LeBlanc'>LL</Avatar>\\n                <Avatar alt='Caroline Xiao'>CX</Avatar>\\n                <Avatar color=\\\"amber\\\" alt='Rafal Matin'>RM</Avatar>\\n                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt='Zank Lance'>ZL</Avatar>\\n                <Avatar style={{ backgroundColor: '#87d068' }} alt='Youself Zhang'>YZ</Avatar>\\n            </AvatarGroup>\\n        </div>\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"hr\", {\n    parentName: \"section\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Avatar\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"alt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Defines an alternative text description of the image.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"border\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"additional border\\uFF08>=2.52.0\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{color?:string //color, motion?:boolean // has animation} or boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottomSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bottom Slot config \\uFF08>= 2.52.0 \\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"render?: () => React.ReactNode //Full control the rendering,\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"shape?: \\\"circle\\\" or \\\"square\\\" // slot shape,\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"text: React.ReactNode // slot content,\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"bgColor:string // slot background \", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"textColor:string // text color \", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"className:string \", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"style?:CSSProperties\", mdx(\"br\", null), \"}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"color\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Color of the avatar, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"amber\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"cyan\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"indigo\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-blue\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light-green\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lime\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"orange\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pink\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rain\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"red\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"teal\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"violet\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"yellow\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"white\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"grey\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"contentMotion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avatar content area animation \\uFF08>=2.xx.0\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pixel size of the distance between the left and right sides of the character avatar\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"3\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hoverMask\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Avatar content overlay when hover\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgAttr\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Native html img attributes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.ImgHTMLAttributes<HTMLImageElement\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shape\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Shape of the avatar, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"square\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size of the avatar, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-extra-small\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-large\"), \" and valid value like \\\"10px\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Resource address for imgage avatars\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"srcSet\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set the image avatar responsive resource address\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"topSlot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"top Slot config \\uFF08>= 2.52.0 \\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"render?: () => React.ReactNode //Full control the rendering,\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"gradientStart?: string // Top background gradient starting color \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"gradientEnd?: string // Top background gradient ending color\", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"text: React.ReactNode \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"textColor:string //text color \", mdx(\"br\", null), \" \", mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"className:string\", mdx(\"br\", null), mdx(\"div\", {\n    style: {\n      width: 20,\n      display: 'inline-block'\n    }\n  }), \"style?:CSSProperties\", mdx(\"br\", null), \"}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Click the callback of the avatar.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Image load failed event, returning false closes the default fallback behavior of the component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) = > boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback to onMouseEnter event\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback to onMouseLeave event\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AvatarGroup\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Display +N when the number of avatars exceeds this value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overlapFrom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set the coverage direction of the avatars, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderMore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize the more tag\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(restNumber: number, restAvatars: ReactNode[]) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shape\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Shape of the avatar, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"square\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size of the avatar, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-extra-small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"extra-large\"), \" and valid value like \\\"10px\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatars are generally not used for operations and do not need to be focused. But when the Avatar can be clicked (such as the avatar on the Semi official website), it needs to be focused and respond to the keyboard \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" event.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When Avatar is used in combination with other components, also check the accessibility guidelines for that component.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avatar's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"alt\"), \" attribute can be read by screen readers, when using the avatar component, please use the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"alt\"), \" attribute to explain the content of the image.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <>\\n            {/* Good case */ }\\n            <Avatar\\n                alt=\\\"A cut cat\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            <Avatar\\n                alt=\\\"Jiang Pengzhi\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            {/* Bad case: empty content */ }\\n            <Avatar\\n                alt=\\\"\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n            {/* Bad case: no need to include picture or image in alt */ }\\n            <Avatar\\n                alt=\\\"Picture of Jiang Pengzhi\\\"\\n                src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n                style={{ margin: 4 }}\\n            />\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/avatar","next":{"fields":{"slug":"zh-CN/show/avatar"},"id":"21d89c41-3906-5ce3-ab15-2e2e50d2e34c","frontmatter":{"title":"Avatar 头像","localeCode":"zh-CN","icon":"doc-avatar","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/tree"},"id":"2258d6c8-6b8f-5b6a-b0ab-41a595dc8b44","frontmatter":{"title":"Tree 树形控件","localeCode":"zh-CN","icon":"doc-tree","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}