{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/badge","result":{"data":{"current":{"frontmatter":{"title":"Badge","order":63,"brief":"Badge generates a small badge to give users tips.","icon":"doc-badge"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#maximum-value","title":"Maximum Value"},{"url":"#position","title":"Position"},{"url":"#theming","title":"Theming"},{"url":"#independent-usage","title":"Independent Usage"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#content-guidelines","title":"Content Guidelines"},{"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\": 63,\n  \"category\": \"Show\",\n  \"title\": \"Badge\",\n  \"subTitle\": \"Badge\",\n  \"icon\": \"doc-badge\",\n  \"brief\": \"Badge generates a small badge to give users tips.\"\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 { Badge } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The basic type of Badge is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"count\"), \". The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \" property changes a badge into a small dot. The two are mutually exclusive, giving priority to rendering \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dot\"), \". When passed in a node type, the node will be rendered directly.\"), 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  }, \"Maximum Value\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"overflowCount\"), \" property to cap the number value of the badge content. When the actual value exceeds that value, it will be formatted into \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"${overflowCount}+\"), \".\"), 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  }, \"Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" property to set the position of the badge to its children. The prop uses one of: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftTop\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"leftBottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightTop\"), \"(default), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rightBottom\"), \".\"), 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  }, \"Theming\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" prop to customize the styling. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" supports the following values: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"solid\"), \"(default), \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"inverted\"), \".\"), 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\"), \" support the following values: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \"(default),\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"secondary\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tertiary\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"danger\"), \".\"), 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  }, \"Independent Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Badge can be used alone when it is a stand-alone element.\"), 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' /> processing</span>\\n        <br/>\\n        <span><Badge dot type='tertiary' /> info</span>\\n        <br/>\\n        <span><Badge dot type='success' /> success</span>\\n        <br/>\\n        <span><Badge dot type='warning' /> warning</span>\\n        <br/>\\n        <span><Badge dot type='danger' /> error</span>\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Base\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"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  }, \"Display content\"), 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  }, \"countClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"count 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  }, \"dot\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Displayed as a little dot.\"), 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  }, \"Cap number 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Badge position, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left Top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left Bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right Top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right Bottom\")), 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  }, \"style of content (>=v2.59.1)\"), 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  }, \"theme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Badge theme, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"solid\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \", \", 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  }, \"Badge type, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"tertiary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \",\", 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  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Capitalize the first letter\"))), 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/badge","next":{"fields":{"slug":"zh-CN/show/badge"},"id":"66e508d2-4aa4-59af-bb31-1a54b71329d3","frontmatter":{"title":"Badge 徽章","localeCode":"zh-CN","icon":"doc-badge","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/avatar"},"id":"21d89c41-3906-5ce3-ab15-2e2e50d2e34c","frontmatter":{"title":"Avatar 头像","localeCode":"zh-CN","icon":"doc-avatar","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}