{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/button","result":{"data":{"current":{"frontmatter":{"title":"Button 按钮","order":22,"brief":"用户使用按钮来触发一个操作或者进行跳转。","icon":"doc-button"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#按钮类型","title":"按钮类型","items":[{"url":"#关于类型字体色值","title":"关于类型字体色值"}]},{"url":"#按钮主题","title":"按钮主题","items":[{"url":"#浅色背景","title":"浅色背景"},{"url":"#深色背景","title":"深色背景"},{"url":"#无背景","title":"无背景"},{"url":"#边框模式","title":"边框模式"}]},{"url":"#尺寸","title":"尺寸"},{"url":"#块级按钮","title":"块级按钮"},{"url":"#图标按钮","title":"图标按钮"},{"url":"#链接按钮","title":"链接按钮"},{"url":"#禁用状态","title":"禁用状态"},{"url":"#加载状态","title":"加载状态"},{"url":"#ai-风格---多彩按钮","title":"AI 风格 - 多彩按钮"},{"url":"#按钮组合","title":"按钮组合","items":[{"url":"#组合尺寸","title":"组合尺寸"},{"url":"#组合禁用","title":"组合禁用"},{"url":"#组合类型","title":"组合类型"}]},{"url":"#分裂按钮组合","title":"分裂按钮组合","items":[{"url":"#基础使用","title":"基础使用"}]}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#button","title":"Button"},{"url":"#buttongroup","title":"ButtonGroup"},{"url":"#splitbuttongroup-v1120新增","title":"SplitButtonGroup V1.12.0新增"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#键盘和焦点","title":"键盘和焦点"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"},{"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\": 22,\n  \"category\": \"输入类\",\n  \"title\": \"Button 按钮\",\n  \"icon\": \"doc-button\",\n  \"dir\": \"column\",\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 Empty = makeShortcode(\"Empty\");\nvar IllustrationNoAccess = makeShortcode(\"IllustrationNoAccess\");\nvar IllustrationNoAccessDark = makeShortcode(\"IllustrationNoAccessDark\");\nvar Button = makeShortcode(\"Button\");\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 { Button, SplitButtonGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u7C7B\\u578B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u652F\\u6301\\u4EE5\\u4E0B\\u7C7B\\u578B\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3B\\u6309\\u94AE\\uFF08\\\"primary\\\"\\uFF0C\\u9ED8\\u8BA4\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6B21\\u8981\\u6309\\u94AE\\uFF08\\\"secondary\\\"\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B2C\\u4E09\\u6309\\u94AE\\uFF08\\\"tertiary\\\"\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8B66\\u544A\\u6309\\u94AE\\uFF08\\\"warning\\\"\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5371\\u9669\\u6309\\u94AE\\uFF08\\\"danger\\\"\\uFF09\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div className=\\\"btn-margin-right\\\">\\n            <Button>\\u4E3B\\u8981\\u6309\\u94AE</Button>\\n            <Button type=\\\"secondary\\\">\\u6B21\\u8981\\u6309\\u94AE</Button>\\n            <Button type=\\\"tertiary\\\">\\u7B2C\\u4E09\\u6309\\u94AE</Button>\\n            <Button type=\\\"warning\\\">\\u8B66\\u544A\\u6309\\u94AE</Button>\\n            <Button type=\\\"danger\\\">\\u5371\\u9669\\u6309\\u94AE</Button>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5173\\u4E8E\\u7C7B\\u578B\\u5B57\\u4F53\\u8272\\u503C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u7684\\u5B57\\u4F53\\u8272\\u503C\\u4F7F\\u7528\\u7684\\u90FD\\u662F \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties\"\n  }, \"CSS Variables\"), \"\\uFF0C\\u5206\\u522B\\u4E3A\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-primary)\"), \"\\uFF1A\\u4E3B\\u8981\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-secondary)\"), \"\\uFF1A\\u6B21\\u8981\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-tertiary)\"), \"\\uFF1A\\u7B2C\\u4E09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-warning)\"), \"\\uFF1A\\u8B66\\u544A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-danger)\"), \"\\uFF1A\\u5371\\u9669\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F7F\\u7528\\u8FD9\\u4E9B\\u4E3B\\u9898\\u8272\\u5B9A\\u4E49\\u4F60\\u7684\\u5143\\u7D20\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\n\\nfunction ButtonDemo() {\\n    const types = [['primary', '\\u4E3B\\u8981'], ['secondary', '\\u6B21\\u8981'], ['tertiary', '\\u7B2C\\u4E09'], ['warning', '\\u8B66\\u544A'], ['danger', '\\u5371\\u9669']];\\n\\n    return (\\n        <article>\\n            {types.map((type, index) => (\\n                <strong key={index} style={{ color: `var(--semi-color-${Array.isArray(type) ? type[0] : type})`, marginRight: 10 }}>{Array.isArray(type) ? type[1]: type}</strong>\\n            ))}\\n        </article>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u524D\\u53EF\\u7528\\u7684\\u4E3B\\u9898\\uFF08theme\\uFF09\\u4E3A\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"light\"), \"\\uFF1A\\u6D45\\u8272\\u80CC\\u666F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"solid\"), \"\\uFF1A\\u6DF1\\u8272\\u80CC\\u666F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"borderless\"), \"\\uFF1A\\u65E0\\u80CC\\u666F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"outline\"), \": \\u8FB9\\u6846\\u6A21\\u5F0F\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u7684\\u4E3B\\u9898\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6D45\\u8272\\u80CC\\u666F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <>\\n            <Button theme='light' type='primary' style={{ marginRight: 8 }}>\\u6D45\\u8272\\u4E3B\\u8981</Button>\\n            <Button theme='light' type='secondary' style={{ marginRight: 8 }}>\\u6D45\\u8272\\u6B21\\u8981</Button>\\n            <Button theme='light' type='tertiary' style={{ marginRight: 8 }}>\\u6D45\\u8272\\u7B2C\\u4E09</Button>\\n            <Button theme='light' type='warning' style={{ marginRight: 8 }}>\\u6D45\\u8272\\u8B66\\u544A</Button>\\n            <Button theme='light' type='danger' style={{ marginRight: 8 }}>\\u6D45\\u8272\\u5371\\u9669</Button>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6DF1\\u8272\\u80CC\\u666F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <>\\n            <Button theme='solid' type='primary' style={{ marginRight: 8 }}>\\u6DF1\\u8272\\u4E3B\\u8981</Button>\\n            <Button theme='solid' type='secondary' style={{ marginRight: 8 }}>\\u6DF1\\u8272\\u6B21\\u8981</Button>\\n            <Button theme='solid' type='tertiary' style={{ marginRight: 8 }}>\\u6DF1\\u8272\\u7B2C\\u4E09</Button>\\n            <Button theme='solid' type='warning' style={{ marginRight: 8 }}>\\u6DF1\\u8272\\u8B66\\u544A</Button>\\n            <Button theme='solid' type='danger' style={{ marginRight: 8 }}>\\u6DF1\\u8272\\u5371\\u9669</Button>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u65E0\\u80CC\\u666F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <>\\n            <Button theme='borderless' type='primary' style={{ marginRight: 8 }}>\\u4E3B\\u8981</Button>\\n            <Button theme='borderless' type='secondary' style={{ marginRight: 8 }}>\\u6B21\\u8981</Button>\\n            <Button theme='borderless' type='tertiary' style={{ marginRight: 8 }}>\\u7B2C\\u4E09</Button>\\n            <Button theme='borderless' type='warning' style={{ marginRight: 8 }}>\\u8B66\\u544A</Button>\\n            <Button theme='borderless' type='danger' style={{ marginRight: 8 }}>\\u5371\\u9669</Button>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u8FB9\\u6846\\u6A21\\u5F0F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <>\\n            <Button theme='outline' type='primary' style={{ marginRight: 8 }}>\\u4E3B\\u8981</Button>\\n            <Button theme='outline' type='secondary' style={{ marginRight: 8 }}>\\u6B21\\u8981</Button>\\n            <Button theme='outline' type='tertiary' style={{ marginRight: 8 }}>\\u7B2C\\u4E09</Button>\\n            <Button theme='outline' type='warning' style={{ marginRight: 8 }}>\\u8B66\\u544A</Button>\\n            <Button theme='outline' type='danger' style={{ marginRight: 8 }}>\\u5371\\u9669</Button>\\n        </>\\n    );\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u5B9A\\u4E49\\u4E86\\u4E09\\u79CD\\u5C3A\\u5BF8\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5927\\uFF1A\\\"large\\\"\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9ED8\\u8BA4\\uFF1A\\\"default\\\"\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C0F\\uFF1A\\\"small\\\"\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div>\\n            <Button size='large' style={{ marginRight: 8 }}>\\u5927\\u5C3A\\u5BF8</Button>\\n            <Button size='default' style={{ marginRight: 8 }}>\\u9ED8\\u8BA4\\u5C3A\\u5BF8</Button>\\n            <Button size='small'>\\u5C0F\\u5C3A\\u5BF8</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5757\\u7EA7\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5757\\u7EA7\\u6309\\u94AE\\u5177\\u6709\\u9884\\u5148\\u5B9A\\u4E49\\u597D\\u7684\\u5BBD\\u5EA6\\uFF0C\\u5B83\\u7684\\u5BBD\\u5EA6\\u4E0E\\u6309\\u94AE\\u91CC\\u9762\\u5185\\u5BB9\\u7684\\u5BBD\\u5EA6\\u65E0\\u5173\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div>\\n            <Button block>\\u5757\\u7EA7\\u6309\\u94AE</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u56FE\\u6807\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u5B9A\\u4E49\\u6309\\u94AE\\u7684\\u56FE\\u6807\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\nimport { IconCamera, IconSidebar, IconChevronDown } from '@douyinfe/semi-icons';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div>\\n            <strong>\\u9ED8\\u8BA4\\u72B6\\u6001\\uFF1A</strong>\\n            <Button icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\" />\\n            <br/><br/>\\n            <strong>\\u7981\\u7528\\u72B6\\u6001\\uFF1A</strong>\\n            <Button disabled icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\"/>\\n            <br/><br/>\\n            <strong>\\u590D\\u5408\\u7C7B\\u578B\\uFF1A</strong>\\n            <span className=\\\"btn-margin-right\\\">\\n                <Button type=\\\"primary\\\" icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\"/>\\n                <Button type=\\\"secondary\\\" icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\" />\\n                <Button type=\\\"warning\\\" icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\" />\\n                <Button type=\\\"danger\\\" icon={<IconCamera />} aria-label=\\\"\\u622A\\u5C4F\\\" />\\n            </span>\\n            <br/><br/>\\n            <strong>\\u66F4\\u6539\\u4E3B\\u9898\\uFF1A</strong>\\n            <Button icon={<IconCamera />} theme=\\\"solid\\\" style={{ marginRight: 10 }} aria-label=\\\"\\u622A\\u5C4F\\\" />\\n            <Button icon={<IconCamera />} theme=\\\"light\\\" aria-label=\\\"\\u622A\\u5C4F\\\" />\\n            <br/><br/>\\n            <strong>\\u66F4\\u6539\\u56FE\\u6807\\u4F4D\\u7F6E\\uFF1A</strong>\\n            <Button icon={<IconSidebar />} theme=\\\"solid\\\" style={{ marginRight: 10 }}>\\u6536\\u8D77</Button>\\n            <Button icon={<IconChevronDown />} theme=\\\"solid\\\" iconPosition=\\\"right\\\">\\u5C55\\u5F00\\u9009\\u9879</Button>\\n            <br/><br/>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u94FE\\u63A5\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63A8\\u8350\\u4F7F\\u7528 Typography \\u7684 link \\u5C5E\\u6027\\u6765\\u5B9E\\u73B0\\u94FE\\u63A5\\u578B\\u7684\\u6587\\u5B57\\u6309\\u94AE\\uFF0C\\u5177\\u4F53\\u7528\\u6CD5\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/typography\"\n  }, \"Typography\")), 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 { Typography } from '@douyinfe/semi-ui';\\nimport { IconLink } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const { Text } = Typography;\\n    return (\\n        <div>\\n            <Text link={{ href: 'https://semi.design/' }}>\\u94FE\\u63A5\\u6587\\u672C</Text>\\n            <br />\\n            <br />\\n            <Text link={{ href: 'https://semi.design/' }}>\\u6253\\u5F00\\u7F51\\u7AD9</Text>\\n            <br />\\n            <br />\\n            <Text link icon={<IconLink />} underline>\\u5E26\\u4E0B\\u5212\\u7EBF\\u7684\\u7F51\\u9875\\u94FE\\u63A5</Text>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\\u72B6\\u6001\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div>\\n            <Button disabled>\\u7981\\u7528</Button>\\n            <Button disabled theme=\\\"borderless\\\">\\u65E0\\u80CC\\u666F\\u7981\\u7528</Button>\\n            <Button disabled theme=\\\"light\\\">\\u6D45\\u8272\\u7981\\u7528</Button>\\n            <Button disabled theme=\\\"borderless\\\" type=\\\"primary\\\">\\u65E0\\u80CC\\u666F\\u4E3B\\u8981\\u7981\\u7528</Button>\\n            <Button disabled theme=\\\"solid\\\" type=\\\"warning\\\">\\u6DF1\\u8272\\u8B66\\u544A\\u7981\\u7528</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A0\\u8F7D\\u72B6\\u6001\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u652F\\u6301\\u52A0\\u8F7D\\u72B6\\u6001\\uFF0C\\u901A\\u8FC7\\u8BBE\\u7F6E loading \\u53C2\\u6570\\u503C\\u4E3A true \\u5373\\u53EF\\uFF0C\\u6CE8\\u610F\\uFF1Adisabled \\u72B6\\u6001\\u4F18\\u5148\\u7EA7\\u9AD8\\u4E8E loading \\u72B6\\u6001\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\nimport { IconDelete } from '@douyinfe/semi-icons';\\n\\nfunction ButtonDemo() {\\n    const [saveLoading, setSaveLoading] = useState(false);\\n    const [delLoading, setDelLoading] = useState(true);\\n    const [repLoading, setRepLoading] = useState(true);\\n\\n    const reset = status => {\\n        status = !!status;\\n        setSaveLoading(status);\\n        setDelLoading(status);\\n        setRepLoading(status);\\n    };\\n\\n    return (\\n        <div>\\n            <div> \\n                <div className=\\\"btn-margin-right\\\" style={{ display: 'inline-flex', alignItems: 'center', paddingBottom: 14 }}>\\n                    <Button onClick={() => reset(false)}>\\u5173\\u95ED\\u52A0\\u8F7D\\u6001</Button>\\n                    <Button onClick={() => reset(true)}>\\u5F00\\u542F\\u52A0\\u8F7D\\u6001</Button>\\n                </div>\\n            </div>\\n            <hr/>\\n            <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>\\u4FDD\\u5B58</Button>\\n            <Button loading={delLoading} icon={<IconDelete />} type=\\\"danger\\\" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>\\u5220\\u9664</Button>\\n            <div style={{ width: 200, display: 'inline-block' }}>\\n                <Button loading={repLoading} type=\\\"warning\\\" block theme=\\\"solid\\\" onClick={() => setRepLoading(true)}>\\u64A4\\u9500</Button>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI \\u98CE\\u683C - \\u591A\\u5F69\\u6309\\u94AE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorful\"), \" \\u5373\\u53EF\\u83B7\\u5F97\\u591A\\u5F69\\u6309\\u94AE\\uFF0C\\u591A\\u5F69\\u6309\\u94AE\\u652F\\u6301\\u6240\\u6709\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\uFF0C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u4EC5\\u652F\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \" \\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tertiary\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { Button } from '@douyinfe/semi-ui';\\nimport { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@douyinfe/semi-icons';\\n\\nfunction ButtonDemo() {\\n    return (['Colorful', undefined].map(content => (<div \\n        key={content}\\n        style={{ display: 'flex', rowGap: 16, marginTop: 20, marginLeft: 10, flexDirection: 'column' }}\\n    >\\n        <div style={{ display: 'flex', columnGap: 16 }}>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />}>{content}</Button>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />}>{content}</Button>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"solid\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>\\n        </div>\\n        <div style={{ display: 'flex', columnGap: 16 }}>\\n            <Button colorful theme=\\\"light\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel3 />}>{content}</Button>\\n            <Button colorful theme=\\\"light\\\" type=\\\"primary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"light\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>\\n            <Button colorful theme=\\\"light\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />}>{content}</Button>\\n            <Button colorful theme=\\\"light\\\" type=\\\"tertiary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"light\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>\\n        </div>\\n        <div style={{ display: 'flex', columnGap: 16 }}>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />}>{content}</Button>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"primary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel1 />} disabled >{content}</Button>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />}>{content}</Button>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"tertiary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"outline\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>\\n        </div>\\n        <div style={{ display: 'flex', columnGap: 16 }}>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel3 />}>{content}</Button>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"primary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"primary\\\" icon={<IconAIFilledLevel3 />} disabled >{content}</Button>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />}>{content}</Button>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"tertiary\\\" loading >{content}</Button>\\n            <Button colorful theme=\\\"borderless\\\" type=\\\"tertiary\\\" icon={<IconAIFilledLevel2 />} disabled >{content}</Button>\\n        </div>\\n    </div>)));\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6309\\u94AE\\u7EC4\\u5408\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u5C06\\u591A\\u4E2A\\u6309\\u94AE\\u653E\\u5165\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ButtonGroup\"), \"\\u7684\\u5BB9\\u5668\\u4E2D\\uFF0C\\u901A\\u8FC7\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \"\\u53EF\\u7EDF\\u4E00\\u8BBE\\u7F6E\\u6309\\u94AE\\u7EC4\\u5408\\u4E2D\\u7684\\u6309\\u94AE\\u5C3A\\u5BF8\\uFF0C\\u662F\\u5426\\u7981\\u7528\\u548C\\u7C7B\\u578B\\u3002\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u5408\\u5C3A\\u5BF8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    const sizes = ['large', 'default', 'small'];\\n\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            {sizes.map(size => (\\n                <div style={{ marginRight: 10 }} key={size}>\\n                    <ButtonGroup size={size}>\\n                        <Button>\\u62F7\\u8D1D</Button>\\n                        <Button>\\u67E5\\u8BE2</Button>\\n                        <Button>\\u526A\\u5207</Button>\\n                    </ButtonGroup>\\n                </div>\\n            ))}\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u5408\\u7981\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            <div style={{ marginRight: 10 }}>\\n                <ButtonGroup disabled>\\n                    <Button>\\u62F7\\u8D1D</Button>\\n                    <Button>\\u67E5\\u8BE2</Button>\\n                    <Button>\\u526A\\u5207</Button>\\n                </ButtonGroup>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u5408\\u7C7B\\u578B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { ButtonGroup, Button } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'];\\n\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            {types.map(type => (\\n                <div style={{ marginRight: 10 }} key={type}>\\n                    <ButtonGroup type={type} aria-label=\\\"\\u64CD\\u4F5C\\u6309\\u94AE\\u7EC4\\\">\\n                        <Button>\\u62F7\\u8D1D</Button>\\n                        <Button>\\u67E5\\u8BE2</Button>\\n                        <Button>\\u526A\\u5207</Button>\\n                    </ButtonGroup>\\n                </div>\\n            ))}\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5206\\u88C2\\u6309\\u94AE\\u7EC4\\u5408\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button\"), \"\\u548C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Dropdown\"), \"\\u7ED3\\u5408\\u7684\\u573A\\u666F\\u4E0B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5206\\u88C2\\u6309\\u94AE\\uFF0C\\u5206\\u88C2\\u6309\\u94AE\\u6DFB\\u52A0\\u4E86\\u6309\\u94AE\\u4E4B\\u95F4\\u7684\\u95F4\\u9694\\uFF0C\\u5E76\\u6539\\u53D8\\u4E86\\u6309\\u94AE\\u7684\\u8FB9\\u6846\\u5706\\u89D2\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useState } from 'react';\\nimport { SplitButtonGroup, Dropdown, Button } from '@douyinfe/semi-ui';\\nimport { IconTreeTriangleDown } from '@douyinfe/semi-icons';\\n\\nfunction SplitButtonDemo(){\\n\\n    const menu = [\\n        { node: 'item', name: '\\u7F16\\u8F91\\u9879\\u76EE', onClick: () => console.log('\\u7F16\\u8F91\\u9879\\u76EE\\u70B9\\u51FB') },\\n        { node: 'item', name: '\\u91CD\\u7F6E\\u9879\\u76EE' },\\n        { node: 'divider' },\\n        { node: 'item', name: '\\u590D\\u5236\\u9879\\u76EE' },\\n        { node: 'item', name: '\\u4ECE\\u9879\\u76EE\\u521B\\u5EFA\\u6A21\\u7248' },\\n        { node: 'divider' },\\n        { node: 'item', name: '\\u5220\\u9664\\u9879\\u76EE', type: 'danger' },\\n    ];\\n\\n    const [btnVisible, setBtnVisible] = useState({\\n        1: false,\\n        2: false,\\n        3: false\\n    });\\n\\n    const handleVisibleChange = (key, visible)=>{\\n        newBtnVisible = { ...btnVisible };\\n        newBtnVisible[key] = visible;\\n        setBtnVisible(newBtnVisible);\\n    };\\n\\n    return (\\n        <div>\\n            <SplitButtonGroup style={{ marginRight: 10 }} aria-label=\\\"\\u9879\\u76EE\\u64CD\\u4F5C\\u6309\\u94AE\\u7EC4\\\">\\n                <Button theme=\\\"solid\\\" type=\\\"primary\\\">\\u5206\\u88C2\\u6309\\u94AE</Button>\\n                <Dropdown onVisibleChange={(v)=>handleVisibleChange(1, v)} menu={menu} trigger=\\\"click\\\" position=\\\"bottomRight\\\">\\n                    <Button style={btnVisible[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }} theme=\\\"solid\\\" type=\\\"primary\\\" icon={<IconTreeTriangleDown />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n            <SplitButtonGroup style={{ marginRight: 10 }} aria-label=\\\"\\u9879\\u76EE\\u64CD\\u4F5C\\u6309\\u94AE\\u7EC4\\\">\\n                <Button theme=\\\"light\\\" type=\\\"primary\\\">\\u5206\\u88C2\\u6309\\u94AE</Button>\\n                <Dropdown onVisibleChange={(v)=>handleVisibleChange(2, v)} menu={menu} trigger=\\\"click\\\" position=\\\"bottomRight\\\">\\n                    <Button style={btnVisible[2]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme=\\\"light\\\" type=\\\"primary\\\" icon={<IconTreeTriangleDown />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n            <SplitButtonGroup aria-label=\\\"\\u9879\\u76EE\\u64CD\\u4F5C\\u6309\\u94AE\\u7EC4\\\">\\n                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:{}} theme=\\\"borderless\\\" type=\\\"primary\\\">\\u5206\\u88C2\\u6309\\u94AE</Button>\\n                <Dropdown onVisibleChange={(v)=>handleVisibleChange(3, v)} menu={menu} trigger=\\\"click\\\" position=\\\"bottomRight\\\">\\n                    <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-1)', padding: '8px 4px' }:{ padding: '8px 4px' }} theme=\\\"borderless\\\" type=\\\"primary\\\" icon={<IconTreeTriangleDown />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n        </div>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Button\"), 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  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6309\\u94AE\\u7684\\u6807\\u7B7E\"), 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  }, \"block\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C06\\u6309\\u94AE\\u8BBE\\u7F6E\\u4E3A\\u5757\\u7EA7\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bool\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), 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  }, \"contentClassName\"), 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  }, \"colorful\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u591A\\u5F69\\u6309\\u94AE\\uFF0C\\u81EA 2.86.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\\u72B6\\u6001\"), 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  }, \"htmlType\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"button\"), \" \\u539F\\u751F\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"type\"), \" \\u503C\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"button\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"reset\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"submit\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"button\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u6807\"), 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  }, \"iconPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u6807\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \"|\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), 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  }, \"left\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u72B6\\u6001\"), 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  }, \"noHorizontalPadding\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u6C34\\u5E73\\u65B9\\u5411\\u662F\\u5426\\u53BB\\u6389\\u5185\\u8FB9\\u8DDD\\uFF0C\\u53EA\\u5BF9\\u8BBE\\u7F6E\\u4E86 icon \\u7684 Button \\u6709\\u6548\\u3002\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\"), \"\\uFF08\\u7B49\\u6548\\u4E8E \", \"[\", \"\\\"left\\\", \\\"right\\\"\", \"]\", \"\\uFF09\\uFF0C\\\"left\\\"\\uFF0C\\\"right\\\"\\uFF0C\", \"[\", \"\\\"left\\\", \\\"right\\\"\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"string\", \"|\", \"Array<string\", \">\"), 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  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6309\\u94AE\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"default\\\"\")), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), 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  }, \"\\u6309\\u94AE\\u4E3B\\u9898\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"solid\"), \"\\uFF08\\u6709\\u80CC\\u666F\\u8272\\uFF09\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"borderless\"), \"\\uFF08\\u65E0\\u80CC\\u666F\\u8272\\uFF09\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \"\\uFF08\\u6D45\\u80CC\\u666F\\u8272\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"outline\"), \"(\\u8FB9\\u6846\\u6A21\\u5F0F)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"light\\\"\")), 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  }, \"\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", 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  }, \"warning\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"primary\\\"\")), 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  }, \"\\u5355\\u51FB\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(MouseEvent)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseDown\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9F20\\u6807\\u6309\\u4E0B\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(MouseEvent)\"), 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  }, \"\\u9F20\\u6807\\u79FB\\u5165\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(MouseEvent)\"), 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  }, \"\\u9F20\\u6807\\u79FB\\u51FA\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(MouseEvent)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ButtonGroup\"), 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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6309\\u94AE\\u7EC4\\u7684\\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"colorful\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u591A\\u5F69\\u6309\\u94AE\\uFF0C\\u81EA 2.86.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u6309\\u94AE\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"default\\\"\"), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.20.0\")), 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  }, \"\\u6309\\u94AE\\u4E3B\\u9898\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"solid\"), \"\\uFF08\\u6709\\u80CC\\u666F\\u8272\\uFF09\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"borderless\"), \"\\uFF08\\u65E0\\u80CC\\u666F\\u8272\\uFF09\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \"\\uFF08\\u6D45\\u80CC\\u666F\\u8272\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"outline\"), \"(\\u8FB9\\u6846\\u6A21\\u5F0F)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"light\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", 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  }, \"warning\"), \"\\u3001 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"primary\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"SplitButtonGroup \", mdx(\"strong\", {\n    parentName: \"h3\"\n  }, \"V1.12.0\\u65B0\\u589E\")), 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  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u88C2\\u6309\\u94AE\\u7EC4\\u7684\\u6807\\u7B7E\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7C7B\\u540D\"), 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  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u7528\\u4E8E\\u8868\\u793A\\u6309\\u94AE\\u7684\\u4F5C\\u7528\\uFF0C\\u5BF9\\u4E8E\\u56FE\\u6807\\u6309\\u94AE\\uFF0C\\u6211\\u4EEC\\u63A8\\u8350\\u4F7F\\u7528\\u6B64\\u5C5E\\u6027\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" \\u4E0E disabled \\u5C5E\\u6027\\u540C\\u6B65\\uFF0C\\u8868\\u793A\\u6309\\u94AE\\u7981\\u7528\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Button \\u7684\\u7126\\u70B9\\u7BA1\\u7406\\u4E0E\\u539F\\u751F button \\u4E00\\u81F4\\uFF0C\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u4F7F\\u7528 Tab \\u53CA  Shift + Tab \\u5207\\u6362\\u7126\\u70B9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Button \\u7684\\u89E6\\u53D1\\u4E0E\\u539F\\u751F button \\u4E00\\u81F4\\uFF0C\\u5F53\\u6309\\u94AE\\u805A\\u7126\\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Enter \\u6216 Space \\u952E\\u6FC0\\u6D3B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ButtonGroup \\u4E2D\\u7684\\u6309\\u94AE\\u4E0E\\u5355\\u4E2A\\u6309\\u94AE\\u7684\\u7126\\u70B9\\u7BA1\\u7406\\u65B9\\u5F0F\\u4E00\\u81F4\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 Tab \\u4EE5\\u53CA Shift + Tab \\u8FDB\\u884C\\u5207\\u6362\"))), 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  }, \"\\u6309\\u94AE\\u9700\\u8981\\u6E05\\u6670\\u53EF\\u9884\\u6D4B\\uFF0C\\u7528\\u6237\\u5E94\\u8BE5\\u80FD\\u591F\\u9884\\u6D4B\\u4ED6\\u4EEC\\u70B9\\u51FB\\u6309\\u94AE\\u65F6\\u4F1A\\u53D1\\u751F\\u4EC0\\u4E48\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6309\\u94AE\\u5E94\\u8BE5\\u603B\\u662F\\u4EE5\\u9F13\\u52B1\\u884C\\u52A8\\u7684\\u5F3A\\u52A8\\u8BCD\\u5F00\\u5934\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3A\\u4E86\\u7ED9\\u7528\\u6237\\u63D0\\u4F9B\\u8DB3\\u591F\\u7684\\u4E0A\\u4E0B\\u6587\\uFF0C\\u5728\\u6309\\u94AE\\u4E0A\\u4F7F\\u7528 {\\u52A8\\u8BCD}+{\\u540D\\u8BCD} \\u5185\\u5BB9\\u516C\\u5F0F\\uFF1B\\u9664\\u4E86\\u5E38\\u89C1\\u7684\\u52A8\\u4F5C\\uFF0C\\u5982\\u201CDone\\u201D\\u3001\\u201CClose\\u201D\\u3001\\u201CCancel\\u201D\\u6216\\u201COK\\u201D\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"div\", {\n    style: {\n      textAlign: 'center'\n    }\n  }, mdx(Empty, {\n    image: mdx(IllustrationNoAccess, {\n      style: {\n        width: 150,\n        height: 150\n      },\n      mdxType: \"IllustrationNoAccess\"\n    }),\n    darkModeImage: mdx(IllustrationNoAccessDark, {\n      style: {\n        width: 150,\n        height: 150\n      },\n      mdxType: \"IllustrationNoAccessDark\"\n    }),\n    description: 'No permission to view this page',\n    mdxType: \"Empty\"\n  }), mdx(Button, {\n    theme: \"solid\",\n    type: \"primary\",\n    style: {\n      marginTop: 12\n    },\n    mdxType: \"Button\"\n  }, \"Apply permission\"))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"div\", {\n    style: {\n      textAlign: 'center'\n    }\n  }, mdx(Empty, {\n    image: mdx(IllustrationNoAccess, {\n      style: {\n        width: 150,\n        height: 150\n      },\n      mdxType: \"IllustrationNoAccess\"\n    }),\n    darkModeImage: mdx(IllustrationNoAccessDark, {\n      style: {\n        width: 150,\n        height: 150\n      },\n      mdxType: \"IllustrationNoAccessDark\"\n    }),\n    description: 'No permission to view this page',\n    mdxType: \"Empty\"\n  }), mdx(Button, {\n    theme: \"solid\",\n    type: \"primary\",\n    style: {\n      marginTop: 12\n    },\n    mdxType: \"Button\"\n  }, \"Apply\")))))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u6309\\u94AE\\u548C\\u5176\\u4ED6\\u7EC4\\u4EF6\\u4E00\\u8D77\\u65F6\\u5019\\uFF0C\\u5982\\u679C\\u5176\\u4ED6\\u7EC4\\u4EF6\\uFF08\\u6BD4\\u5982 Modal \\u548CSidesheet\\uFF09\\u5DF2\\u7ECF\\u63D0\\u4F9B\\u4E86\\u8DB3\\u591F\\u4FE1\\u606F\\u7684\\u4E0A\\u4E0B\\u6587\\u7684\\u8BDD\\uFF0C\\u6309\\u94AE\\u53EF\\u4EE5\\u53EA\\u5C55\\u793A {\\u52A8\\u8BCD}\\uFF0C\\u5982\\u201CAdd\\u201D\\u3001\\u201CCreate\\u201D\\uFF1B\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-good-2.png\",\n    style: {\n      width: 350\n    }\n  })), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-bad-2.png\",\n    style: {\n      width: 350\n    }\n  }))))), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u59CB\\u7EC8\\u6309\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\uFF08Sentence case\\uFF09\\u539F\\u5219\\u4E66\\u5199\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Create project\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Create \", mdx(\"br\", null), \" Create a project\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit profile\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Edit\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h4\", {\n    parentName: \"li\"\n  }, \"\\u4E3A\\u4EC0\\u4E48Button\\u4E2D\\u7684icon\\u5C5E\\u6027\\u4E0D\\u8D77\\u4F5C\\u7528\\uFF1F\"), \"\\u8BF7\\u68C0\\u67E5\\u4F60\\u7684Button import\\u8DEF\\u5F84\\uFF0C\\u6B63\\u786E\\u7684import\\u8DEF\\u5F84\\u5E94\\u8BE5\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"import { Button } from '@douyinfe/semi-ui;'\"), \"\\uFF0C\\u5982\\u679C\\u4F60\\u9519\\u8BEF\\u5730\\u4ECE @douyinfe/semi-ui/button/button\\u4E2Dimport\\u7684\\u8BDD\\uFF0C\\u83B7\\u53D6\\u5230\\u7684\\u662F\\u4E0D\\u5E26icon\\u529F\\u80FD\\u7684\\u57FA\\u7840Button\\u7EC4\\u4EF6\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"5\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/button","next":{"fields":{"slug":"en-US/basic/floatbutton"},"id":"838cdbaf-ce85-53d4-a89c-5a8aee4daf7a","frontmatter":{"title":"FloatButton","localeCode":"en-US","icon":"doc-floatButton","showNew":true}},"previous":{"fields":{"slug":"en-US/basic/button"},"id":"fc739721-edb4-571f-9854-10e56ff47894","frontmatter":{"title":"Button","localeCode":"en-US","icon":"doc-button","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}