{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/badge","result":{"data":{"current":{"frontmatter":{"title":"Badge 徽章","order":63,"brief":"用徽章来给用户提示。","icon":"doc-badge"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#设置显示数字最大值","title":"设置显示数字最大值"},{"url":"#设置徽标位置","title":"设置徽标位置"},{"url":"#设置徽标样式","title":"设置徽标样式"},{"url":"#独立使用","title":"独立使用"}]},{"url":"#api参考","title":"API参考"},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n  \"order\": 63,\n  \"category\": \"展示类\",\n  \"title\": \"Badge 徽章\",\n  \"icon\": \"doc-badge\",\n  \"brief\": \"用徽章来给用户提示。\"\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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Badge } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Badge \\u7684\\u57FA\\u672C\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"count\"), \"\\u3002\\u5982\\u679C\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \" \\u5219\\u663E\\u793A\\u4E3A\\u5C0F\\u5706\\u70B9\\uFF0C\\u4E24\\u8005\\u4E92\\u65A5\\uFF0C\\u4F18\\u5148\\u6E32\\u67D3\\u5C0F\\u5706\\u70B9\\u3002\\u5F53\\u4F20\\u5165\\u662F\\u8282\\u70B9\\u7C7B\\u578B\\u65F6\\uFF0C\\u5C06\\u76F4\\u63A5\\u6E32\\u67D3\\u8BE5\\u8282\\u70B9\\u3002\"), 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 { Badge, Avatar } from '@douyinfe/semi-ui';\\nimport { IconLock } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const style = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n    };\\n    return (\\n        <div>\\n            <Badge count={5}>\\n                <Avatar color='blue' shape='square' style={style}>BM</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge dot>\\n                <Avatar color='blue' shape='square' style={style}>YL</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }}/>}>\\n                <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count='NEW' >\\n                <Avatar color='light-blue' shape='square' style={style}>WF</Avatar>\\n            </Badge>\\n        </div>\\n    );  \\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u663E\\u793A\\u6570\\u5B57\\u6700\\u5927\\u503C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overflowCount\"), \" \\u503C\\u8BBE\\u7F6E\\u663E\\u793A\\u6570\\u5B57\\u7684\\u6700\\u5927\\u503C\\uFF0C\\u5F53\\u5B9E\\u9645\\u6570\\u503C\\u8D85\\u8FC7\\u8BE5\\u503C\\u65F6\\u5C06\\u4EE5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"${overflowCount}+\"), \" \\u7684\\u683C\\u5F0F\\u663E\\u793A\\u3002\"), 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 { Badge, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const style = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n    };\\n    return (\\n        <div>\\n            <Badge count={99} >\\n                <Avatar color='teal' shape='square' style={style}>ZH</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count={100} >\\n                <Avatar color='teal' shape='square' style={style}>HS</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count={99} overflowCount={10} >\\n                <Avatar color='green' shape='square' style={style}>DY</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count={1000} overflowCount={999} >\\n                <Avatar color='green' shape='square' style={style}>TT</Avatar>\\n            </Badge>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u5FBD\\u6807\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" \\u8BBE\\u7F6E\\u4F4D\\u7F6E\\uFF0C\\u652F\\u6301\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftTop\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftBottom\"), \"\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightTop\"), \"\\uFF08\\u9ED8\\u8BA4\\uFF09\\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightBottom\"), \"\\u3002\"), 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 { Badge, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const style = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n    };\\n    return (\\n        <div>\\n            <Badge count='VIP' position='rightTop' type='danger'>\\n                <Avatar color='amber' shape='square' style={style}>ZH</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count='VIP' position='rightBottom' type='danger'>\\n                <Avatar color='amber' shape='square' style={style}>HS</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count='VIP' position='leftTop' type='danger'>\\n                <Avatar color='orange' shape='square' style={style}>DY</Avatar>\\n            </Badge>\\n            <br/>\\n            <br/>\\n            <Badge count='VIP' position='leftBottom' type='danger'>\\n                <Avatar color='orange' shape='square' style={style}>TT</Avatar>\\n            </Badge>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u5FBD\\u6807\\u6837\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u8BBE\\u7F6E\\u5FBD\\u6807\\u7684\\u6837\\u5F0F\\u3002\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u652F\\u6301\\u4E09\\u79CD\\u5F62\\u5F0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"solid\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"inverted\"), \"\\u3002\\u9ED8\\u8BA4\\u5F62\\u5F0F\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"solid\"), \"\\u3002\"), 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 { Badge, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const bgStyle = {\\n        padding: '8px',\\n    };\\n    const style = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n    };\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            <div style={bgStyle}>\\n                <Badge count={5} theme='solid' >\\n                    <Avatar color='indigo' shape='square' style={style}>XZ</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge count={5} theme='light' >\\n                    <Avatar color='indigo' shape='square' style={style}>YB</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge count={5} theme='inverted' >\\n                    <Avatar color='light-green' shape='square' style={style}>LX</Avatar>\\n                </Badge>\\n            </div>\\n            <br/>\\n            <div style={bgStyle}>\\n                <Badge dot theme='solid' >\\n                    <Avatar color='light-green' shape='square' style={style}>YZ</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge dot theme='light' >\\n                    <Avatar color='lime' shape='square' style={style}>HW</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>\\n                <Badge dot theme='inverted' >\\n                    <Avatar color='lime' shape='square' style={style}>XM</Avatar>\\n                </Badge>\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u652F\\u6301\\u5982\\u4E0B\\u7C7B\\u578B\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"secondary\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tertiary\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"danger\"), \"\\u3002\\u9ED8\\u8BA4\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \"\\u3002\"), 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 { Badge, Avatar } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const bgStyle = {\\n        padding: '8px 8px 3px 8px',\\n    };\\n    const style = {\\n        width: '42px',\\n        height: '42px',\\n        borderRadius: '4px',\\n    };\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            <div style={bgStyle}>\\n                <Badge count={5} type='primary' >\\n                    <Avatar color='violet' shape='square' style={style}>MR</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge count={5} type='secondary' >\\n                    <Avatar color='violet' shape='square' style={style}>YL</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge count={5} type='tertiary' >\\n                    <Avatar color='red' shape='square' style={style}>ZW</Avatar>\\n                </Badge>\\n            </div>\\n            <br/>\\n            <div style={bgStyle}>\\n                <Badge count={5} type='warning' >\\n                    <Avatar color='red' shape='square' style={style}>JL</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge count={5} type='danger' >\\n                    <Avatar color='pink' shape='square' style={style}>RT</Avatar>\\n                </Badge>\\n            </div>\\n            <div style={bgStyle}>\\n                <Badge dot type='primary' >\\n                    <Avatar color='pink' shape='square' style={style}>YF</Avatar>\\n                </Badge>\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u72EC\\u7ACB\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53 Badge \\u4F5C\\u4E3A\\u72EC\\u7ACB\\u5143\\u7D20\\u65F6\\u53EF\\u4EE5\\u5355\\u72EC\\u4F7F\\u7528\\u3002\"), 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 { Badge } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Badge count={5} />\\n        <br/>\\n        <br/>\\n        <Badge count='NEW' theme='light' />\\n        <br/>\\n        <br/>\\n        <Badge count={99} overflowCount={10} type='danger' />\\n        <br/>\\n        <br/>\\n        <span><Badge dot type='primary' /> \\u8FDB\\u884C\\u4E2D processing</span>\\n        <br/>\\n        <span><Badge dot type='tertiary' /> \\u4FE1\\u606F info</span>\\n        <br/>\\n        <span><Badge dot type='success' /> \\u6210\\u529F success</span>\\n        <br/>\\n        <span><Badge dot type='warning' /> \\u63D0\\u9192 warning</span>\\n        <br/>\\n        <span><Badge dot type='danger' /> \\u9519\\u8BEF error</span>\\n    </div>\\n);  \\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API\\u53C2\\u8003\"), 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  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u7684 base\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), 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  }, \"\\u5916\\u4FA7 className\"), 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  }, \"count\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C55\\u793A\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"countClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u5BB9\\u533A\\u57DF className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0D\\u5C55\\u793A\\u6570\\u5B57\\uFF0C\\u663E\\u793A\\u5C0F\\u5706\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"overflowCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5927\\u7684\\u5C55\\u793A\\u6570\\u5B57\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftTop\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"leftBottom\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightTop\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"rightBottom\")), 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  }, \"rightTop\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"countStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u5185\\u5BB9\\u7684\\u6837\\u5F0F, v2.59.1\\u540E\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"theme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u4E3B\\u9898\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"solid\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"inverted\")), 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  }, \"solid\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FBD\\u7AE0\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tertiary\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\")), 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  }, \"primary\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Badge\\u5185\\u5BB9\\u82E5\\u4E3A\\u82F1\\u6587\\u65F6\\uFF0C\\u9996\\u5B57\\u6BCD\\u5E94\\u5927\\u5199\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/badge","next":{"fields":{"slug":"en-US/show/calendar"},"id":"86a47fc7-821b-595a-9b61-54e253d5253e","frontmatter":{"title":"Calendar","localeCode":"en-US","icon":"doc-calendar","showNew":null}},"previous":{"fields":{"slug":"en-US/show/badge"},"id":"a87b6eb5-73ce-5fdf-81bd-f9ca3fecffdd","frontmatter":{"title":"Badge","localeCode":"en-US","icon":"doc-badge","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}