{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/button","result":{"data":{"current":{"frontmatter":{"title":"Button","order":22,"brief":"Users use buttons to trigger an operation or jump.","icon":"doc-button"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#button-type","title":"Button Type","items":[{"url":"#about-the-font-color","title":"About the Font Color"}]},{"url":"#button-theme","title":"Button Theme","items":[{"url":"#light-background","title":"Light Background"},{"url":"#dark-background","title":"Dark Background"},{"url":"#no-background","title":"No Background"},{"url":"#border-mode","title":"Border Mode"}]},{"url":"#size","title":"Size"},{"url":"#block-button","title":"Block Button"},{"url":"#icon-button","title":"Icon Button"},{"url":"#link-button","title":"Link Button"},{"url":"#prohibited-status","title":"Prohibited Status"},{"url":"#loading-state","title":"Loading State"},{"url":"#ai-style---colorful-buttons","title":"AI style - Colorful buttons"},{"url":"#button-combination","title":"Button Combination","items":[{"url":"#combined-dimensions","title":"Combined Dimensions"},{"url":"#combined-disabled","title":"Combined Disabled"},{"url":"#combined-type","title":"Combined Type"}]},{"url":"#split-button-group","title":"Split Button Group","items":[{"url":"#basic-usage","title":"Basic Usage"}]}]},{"url":"#api-reference","title":"API Reference","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":"#keyboard-and-focus","title":"Keyboard and Focus"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#related-material","title":"Related Material"}]},"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\": 22,\n  \"category\": \"Input\",\n  \"title\": \"Button\",\n  \"subTitle\": \"Button\",\n  \"icon\": \"doc-button\",\n  \"dir\": \"column\",\n  \"brief\": \"Users use buttons to trigger an operation or jump.\"\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  }, \"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 { Button, SplitButtonGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Button Type\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Buttons support the following types:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Primary button (\\\"primary\\\", default)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Secondary button (\\\"secondary\\\")\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Tertiary button (\\\"tertiary\\\")\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Warning button (\\\"warning\\\")\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Danger button (\\\"danger\\\")\")), 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>Primary Button</Button>\\n            <Button type=\\\"secondary\\\">Secondary Button</Button>\\n            <Button type=\\\"tertiary\\\">Tertiary Button</Button>\\n            <Button type=\\\"warning\\\">Warning Button</Button>\\n            <Button type=\\\"danger\\\">Danger Button</Button>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"About the Font Color\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties\"\n  }, \"CSS Variables\"), \" are used with the button:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-primary)\"), \": main\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-secondary)\"), \": secondary\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-tertiary)\"), \": third\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-warning)\"), \": warning\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"var(--semi-color-danger)\"), \": danger\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can define your elements directly using these theme colors.\"), 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', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];\\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  }, \"Button Theme\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The themes currently available are:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"light\"), \": light background\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"solid\"), \": dark background\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"borderless\"), \": no background\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"outline\"), \": border mode\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The default theme is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"light\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Light Background\"), 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    const themes = [['light', 'light']];\\n    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];\\n\\n    return (\\n        <div>{\\n            themes.map((theme, idxTheme) => (\\n                <div key={idxTheme}>\\n                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>\\n                        {types.map((type, idxType) => (\\n                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>\\n                                <Button\\n                                    theme={theme[0]}\\n                                    type={type[0]}\\n                                >\\n                                    {theme[1]} {type[1]}\\n                                </Button>\\n                            </li>)\\n                        )}\\n                    </ul>\\n                </div>))\\n        }\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Dark Background\"), 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    const themes = [['solid', 'solid']];\\n    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];\\n\\n    return (\\n        <div>{\\n            themes.map((theme, idxTheme) => (\\n                <div key={idxTheme}>\\n                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>\\n                        {types.map((type, idxType) => (\\n                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>\\n                                <Button\\n                                    theme={theme[0]}\\n                                    type={type[0]}\\n                                >\\n                                    {theme[1]} {type[1]}\\n                                </Button>\\n                            </li>)\\n                        )}\\n                    </ul>\\n                </div>))\\n        }\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"No Background\"), 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    const themes = [['borderless', 'borderless']];\\n    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];\\n\\n    return (\\n        <div>{\\n            themes.map((theme, idxTheme) => (\\n                <div key={idxTheme}>\\n                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>\\n                        {types.map((type, idxType) => (\\n                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>\\n                                <Button\\n                                    theme={theme[0]}\\n                                    type={type[0]}\\n                                >\\n                                    {theme[1]} {type[1]}\\n                                </Button>\\n                            </li>)\\n                        )}\\n                    </ul>\\n                </div>))\\n        }\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Border Mode\"), 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    const themes = [['outline', 'outline']];\\n    const types = [['primary', 'primary'], ['secondary', 'secondary'], ['tertiary', 'tertiary'], ['warning', 'warning'], ['danger', 'danger']];\\n\\n    return (\\n        <div>{\\n            themes.map((theme, idxTheme) => (\\n                <div key={idxTheme}>\\n                    <ul style={{ listStyle: 'none', display: 'flex', margin: 0, padding: 0 }}>\\n                        {types.map((type, idxType) => (\\n                            <li key={'' + idxTheme + idxType} style={{ margin: 10 }}>\\n                                <Button\\n                                    theme={theme[0]}\\n                                    type={type[0]}\\n                                >\\n                                    {theme[1]} {type[1]}\\n                                </Button>\\n                            </li>)\\n                        )}\\n                    </ul>\\n                </div>))\\n        }\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Three sizes are defined by default:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Big: \\\"Large\\\"\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Default: \\\"default.\\\"\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Small: \\\"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 }}>large</Button>\\n            <Button size='default' style={{ marginRight: 8 }}>default</Button>\\n            <Button size='small'>small</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Block Button\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The block button has a predefined width, and its width is independent of the width of the contents of the button.\"), 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>block button</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Icon Button\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"An icon that defines a button.\"), 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>Default Status: </strong>\\n            <Button icon={<IconCamera />} aria-label=\\\"Screenshot\\\" />\\n            <br/><br/>\\n            <strong>Disabled Status\\uFF1A</strong>\\n            <Button icon={<IconCamera />} aria-label=\\\"Screenshot\\\"/>\\n            <br/><br/>\\n            <strong>With Type: </strong>\\n            <span className=\\\"btn-margin-right\\\">\\n                <Button type=\\\"primary\\\" icon={<IconCamera />} aria-label=\\\"Screenshot\\\"/>\\n                <Button type=\\\"secondary\\\" icon={<IconCamera />} aria-label=\\\"Screenshot\\\"/>\\n                <Button type=\\\"warning\\\" icon={<IconCamera />} aria-label=\\\"Screenshot\\\"/>\\n                <Button type=\\\"danger\\\" icon={<IconCamera />} aria-label=\\\"Screenshot\\\"/>\\n            </span>\\n            <br/><br/>\\n            <strong>Change Theme: </strong>\\n            <Button icon={<IconCamera />} theme=\\\"solid\\\" style={{ marginRight: 10 }} aria-label=\\\"Screenshot\\\"/>\\n            <Button icon={<IconCamera />} theme=\\\"light\\\" aria-label=\\\"Screenshot\\\"/>\\n            <br/><br/>\\n            <strong>Change Icon Position: </strong>\\n            <Button icon={<IconSidebar />} theme=\\\"solid\\\" style={{ marginRight: 10 }}>Collapse</Button>\\n            <Button icon={<IconChevronDown />} theme=\\\"solid\\\" iconPosition=\\\"right\\\">Expand Options</Button>\\n            <br/><br/>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Link Button\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"We recommend using Typography to achieve link text button. Refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/basic/typography\"\n  }, \"Typography\"), \" for more information.\"), 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/' }}>Link</Text>\\n            <br />\\n            <br />\\n            <Text link={{ href: 'https://semi.design/' }}>Open Website</Text>\\n            <br />\\n            <br />\\n            <Text link icon={<IconLink />} underline>Link</Text>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Prohibited Status\"), 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>Disabled</Button>\\n            <Button disabled theme=\\\"borderless\\\">No background and disabled</Button>\\n            <Button disabled theme=\\\"light\\\">Light and disbaled</Button>\\n            <Button disabled theme=\\\"borderless\\\" type=\\\"primary\\\">No background, primary and disabled</Button>\\n            <Button disabled theme=\\\"solid\\\" type=\\\"warning\\\">Solid, warning and disabled</Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Loading State\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The button supports the Loading state, by setting the loading parameter value to true, note: the state priority is higher than the loading state.\"), 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)}>Stop loading</Button>\\n                    <Button onClick={() => reset(true)}>Start loading</Button>\\n                </div>\\n            </div>\\n            <hr/>\\n            <Button loading={saveLoading} onClick={() => setSaveLoading(true)} style={{ marginRight: 14 }}>Save</Button>\\n            <Button loading={delLoading} icon={<IconDelete />} type=\\\"danger\\\" onClick={() => setDelLoading(true)} style={{ marginRight: 14 }}>Delete</Button>\\n            <div style={{ width: 200, display: 'inline-block' }}>\\n                <Button loading={repLoading} type=\\\"warning\\\" block theme=\\\"solid\\\" onClick={() => setRepLoading(true)}>Revoke</Button>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI style - Colorful buttons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorful\"), \" to get colorful buttons. Colorful buttons support all \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" only supports \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tertiary\"), \".\"), 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  }, \"Button Combination\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can put multiple buttons in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ButtonGroup\"), \" In the container, by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" You can uniformly set the button size in the button combination, whether disabled and type.\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Combined Dimensions\"), 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, ButtonGroup } 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} aria-label=\\\"Operate button group\\\">\\n                        <Button>Copy</Button>\\n                        <Button>Search</Button>\\n                        <Button>Cut</Button>\\n                    </ButtonGroup>\\n                </div>\\n            ))}\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Combined Disabled\"), 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, ButtonGroup } from '@douyinfe/semi-ui';\\n\\nfunction ButtonDemo() {\\n    return (\\n        <div style={{ display: 'flex' }}>\\n            <div style={{ marginRight: 10 }}>\\n                <ButtonGroup disabled>\\n                    <Button>Copy</Button>\\n                    <Button>Search</Button>\\n                    <Button>Cut</Button>\\n                </ButtonGroup>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Combined Type\"), 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, ButtonGroup } 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=\\\"Operate button group\\\">\\n                        <Button>Copy</Button>\\n                        <Button>Search</Button>\\n                        <Button>Cut</Button>\\n                    </ButtonGroup>\\n                </div>\\n            ))}\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Split Button Group\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"V1.12.0\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In the scene where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Button\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Dropdown\"), \" are combined, split buttons can be used. The split buttons add the space between the buttons and change the rounded corners of the buttons.\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), 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: 'title', name: 'Title' },\\n        { node: 'item', name: 'Edit', onClick: () => console.log('Edit clicked') },\\n        { node: 'item', name: 'Reset', type: 'secondary' },\\n        { node: 'divider' },\\n        { node: 'item', name: 'Create', type: 'tertiary' },\\n        { node: 'item', name: 'Copy', type: 'warning' },\\n        { node: 'divider' },\\n        { node: 'item', name: 'Delete', 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=\\\"Project operate button group\\\">\\n                <Button theme=\\\"solid\\\" type=\\\"primary\\\">SplitButton</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 size=\\\"small\\\" />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n            <SplitButtonGroup style={{ marginRight: 10 }} aria-label=\\\"Project operate button group\\\">\\n                <Button theme=\\\"light\\\" type=\\\"primary\\\">SplitButton</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 size=\\\"small\\\" />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n            <SplitButtonGroup aria-label=\\\"Project operate button group\\\">\\n                <Button style={btnVisible[3]?{ background: 'var(--semi-color-fill-0)' }:null} theme=\\\"borderless\\\" type=\\\"primary\\\">SplitButton</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 size=\\\"small\\\" />}></Button>\\n                </Dropdown>\\n            </SplitButtonGroup>\\n        </div>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"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  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label of the button\"), 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  }, \"Set the button to the block level button\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"contentClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content 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  }, \"colorful\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Colorful buttons, supported since version 2.86.0\"), 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  }, \"Prohibited status\"), 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  }, \"Set the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"button\"), \" native \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"type\"), \" value, optional values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"button\\\"\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"reset\\\"\"), \", \", 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  }, \"Icon\"), 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  }, \"Icon location, optional value: \", 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  }, \"Loading state\"), 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  }, \"Set whether to remove the inner margin in the horizontal direction, only valid for iconButton, optional: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\"), \" (equivalent to \", \"[\", \"\\\"left\\\", \\\"right\\\"\", \"]\", \"), \\\"left\\\", \\\"right\\\", \", \"[\", \"\\\"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  }, \"Button size, optional value: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"large\\\"\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"default\\\"\"), \",\", 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  }, \"Custom style\"), 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  }, \"Button theme, optional value: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"solid\\\"\"), \" (with background color), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"borderless\\\"\"), \" (no background color), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"light\\\"\"), \" (light background color), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"outline\\\"\"), \"(Border Mode)\"), 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  }, \"Type, optional values: \", 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  }, \"\\\"warning\\\"\"), \", \", 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  }, \"Click event\"), 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  }, \"Mouse down\"), 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  }, \"Mouse Enter\"), 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  }, \"Mouse Leave\"), 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  }, \"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(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Label of the button group\"), 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  }, \"Custom class name\"), 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  }, \"Colorful buttons\"), 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  }, \"2.86.0\")), 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  }, \"Disabled status\"), 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  }, \"Button size, optional value: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"large\\\"\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"default\\\"\"), \",\", 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  }, \"Custom style\"), 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  }, \"Button theme, optional values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"solid\\\"\"), \" (with background color), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"borderless\\\"\"), \" (without background color), \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"light\\\"\"), \" (light background color),\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\\"outline\\\"\"), \"(Border Mode)\"), 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  }, \"Type, optional values: \", 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  }, \"\\\"warning\\\"\"), \", \", 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\")), 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  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label of the button group\"), 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  }, \"Custom class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom style\"), 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\"), \" is used to indicate the function of the button. For icon buttons, we recommend using this attribute\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" is synchronized with the disabled attribute, indicating that the button is disabled\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Keyboard and Focus\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Button\"), \"'s focus management is consistent with native \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"button\"), \", keyboard users can use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\"), \" to switch focus\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The trigger of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Button\"), \" is the same as the native \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"button\"), \", when the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"button\"), \" is focused, it can be activated by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Space\"), \" key\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The buttons in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ButtonGroup\"), \" are managed in the same way as the focus of a single \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"button\"), \", and can be switched by \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift + Tab\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons need to be clear and predictable, users should be able to predict what will happen when they click the button\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Buttons should always start with a strong verb that encourages action\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"To give the user enough context, use {verb}+{noun} content formulas on buttons; in addition to common actions like \\\"Done\\\", \\\"Close\\\", \\\"Cancel\\\" or \\\"OK\\\"\")), 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 Recommended usage\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C Deprecated usage\"))), 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  }, \"When the button is combined with other components, the button can only display {verb}, such as \\\"Add\\\", \\\"Create\\\", if the other components (such as Modal and Sidesheet) already provide enough context for the information\")), 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 Recommended usage\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C Deprecated usage\"))), 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  }, \"Always write in Sentence case\")), 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 Recommended usage\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C Deprecated usage\"))), 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  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Material\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"5\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/basic/button","next":{"fields":{"slug":"zh-CN/basic/button"},"id":"95f684de-7ce2-5239-9ca0-1a785ebfbd06","frontmatter":{"title":"Button 按钮","localeCode":"zh-CN","icon":"doc-button","showNew":null}},"previous":{"fields":{"slug":"zh-CN/basic/resizable"},"id":"cd251e9b-26c2-5e33-a5c9-cd3a8430de94","frontmatter":{"title":"Resizable 伸缩框","localeCode":"zh-CN","icon":"doc-steps","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}